/**
 * Variáveis CSS — Ader-al Theme
 * Estas são as variáveis base. Os valores dinâmicos (definições do painel)
 * são injetados via wp_add_inline_style() no enqueue.php e sobrescrevem estas.
 *
 * @package ader-al
 */

:root {
	/* ── CORES PRINCIPAIS ───────────────────────────── */
	--ader-primary:       #283e89;
	--ader-primary-dark:  #1e2f6b;
	--ader-primary-light: #3a56b5;
	--ader-secondary:     #f5c824;
	--ader-secondary-dark:#d4aa10;

	/* ── CORES NEUTRAS ──────────────────────────────── */
	--ader-bg:            #ffffff;
	--ader-bg-alt:        #f5f7fa;
	--ader-bg-dark:       #1a1a2e;
	--ader-text:          #212529;
	--ader-text-muted:    #6c757d;
	--ader-text-light:    #ffffff;
	--ader-border:        #dee2e6;
	--ader-border-light:  #f0f0f0;

	/* ── CORES DAS SECÇÕES ──────────────────────────── */
	--ader-sec-hero:      var(--ader-primary);
	--ader-sec-agenda:    #f5f7fa;
	--ader-sec-noticias:  #ffffff;
	--ader-sec-logotipos: #f0f4ff;
	--ader-sec-numeros:   var(--ader-primary);
	--ader-sec-contactos: #f5f7fa;
	--ader-sec-footer:    #1a1a2e;
	--ader-sec-apoio:     #ffffff;

	/* ── TIPOGRAFIA ─────────────────────────────────── */
	--ader-font:          'Inter', sans-serif;
	--ader-font-size:     16px;
	--ader-font-h1:       48px;
	--ader-font-h2:       36px;
	--ader-font-h3:       28px;
	--ader-font-h4:       22px;
	--ader-font-h5:       18px;
	--ader-font-h6:       16px;
	--ader-line-height:   1.6;
	--ader-font-weight-normal: 400;
	--ader-font-weight-medium: 500;
	--ader-font-weight-semi:   600;
	--ader-font-weight-bold:   700;

	/* ── ESPAÇAMENTOS ───────────────────────────────── */
	--ader-space-xs:  0.25rem;  /*  4px */
	--ader-space-sm:  0.5rem;   /*  8px */
	--ader-space-md:  1rem;     /* 16px */
	--ader-space-lg:  1.5rem;   /* 24px */
	--ader-space-xl:  2rem;     /* 32px */
	--ader-space-2xl: 3rem;     /* 48px */
	--ader-space-3xl: 4rem;     /* 64px */
	--ader-space-4xl: 6rem;     /* 96px */

	/* ── SECÇÕES ────────────────────────────────────── */
	--ader-section-padding:    5rem 0;
	--ader-section-padding-sm: 3rem 0;

	/* ── LAYOUT ─────────────────────────────────────── */
	--ader-container-max:    1280px;
	--ader-container-pad:    1.5rem;
	--ader-sidebar-width:    20%;
	--ader-content-width:    80%;

	/* ── BORDAS E RAIOS ─────────────────────────────── */
	--ader-radius-sm:  4px;
	--ader-radius-md:  8px;
	--ader-radius-lg:  16px;
	--ader-radius-xl:  24px;
	--ader-radius-full: 9999px;

	/* ── SOMBRAS ────────────────────────────────────── */
	--ader-shadow-sm:  0 1px 3px rgba(0,0,0,.08);
	--ader-shadow-md:  0 4px 16px rgba(0,0,0,.10);
	--ader-shadow-lg:  0 8px 32px rgba(0,0,0,.14);
	--ader-shadow-xl:  0 16px 48px rgba(0,0,0,.18);

	/* ── TRANSIÇÕES ─────────────────────────────────── */
	--ader-transition:       0.3s ease;
	--ader-transition-fast:  0.15s ease;
	--ader-transition-slow:  0.5s ease;

	/* ── Z-INDEX ────────────────────────────────────── */
	--ader-z-base:    1;
	--ader-z-menu:    100;
	--ader-z-header:  200;
	--ader-z-topbar:  300;
	--ader-z-apoio:   400;
	--ader-z-modal:   1000;

	/* ── HERO ───────────────────────────────────────── */
	--ader-hero-height:    90vh;
	--ader-hero-height-sm: 60vh;

	/* ── HEADER ─────────────────────────────────────── */
	--ader-topbar-height:  40px;
	--ader-header-height:  80px;
	--ader-apoio-height:   64px;
	--ader-apoio-height-mobile: 96px;
}

/* Modo escuro — preparado para futuras implementações */
@media (prefers-color-scheme: dark) {
	:root {
		/* As overrides de dark mode serão adicionadas quando necessário */
	}
}