/* ==========================================================================
   GUIA CLT - Design System: Variáveis
   ==========================================================================
   Tokens de design centralizados. Todos os valores visuais do projeto
   partem daqui. Nunca use valores mágicos no CSS — use estas variáveis.

   O Kadence define --global-palette1..15 via Customizer.
   Aqui criamos aliases semânticos (--gc-*) que referenciam a paleta
   do Kadence quando possível, facilitando troca de cores no painel.
   ========================================================================== */

:root {

/* ── CORES: Paleta Principal ──────────────────────────────────────────
   Mapeamos as cores do Kadence para nomes semânticos.
   Kadence palette atual:
     1: #2B6CB0 (azul principal)
     2: #215387 (azul escuro)
     3: #1A202C (heading)
     4: #2D3748 (texto forte)
     5: #4A5568 (texto corpo)
     6: #718096 (texto leve)
     7: #EDF2F7 (fundo claro)
     8: #F7FAFC (fundo body)
     9: #FFFFFF (branco)
   ─────────────────────────────────────────────────────────────────── */

--gc-color-primary:          var(--global-palette1, #2B6CB0);
--gc-color-primary-dark:     var(--global-palette2, #215387);
--gc-color-primary-light:    #EBF4FF;

--gc-color-accent:           #2F855A;
--gc-color-accent-light:     #F0FFF4;

--gc-color-warning:          #C05621;
--gc-color-warning-light:    #FFFAF0;

--gc-color-danger:           #C53030;
--gc-color-danger-light:     #FFF5F5;

--gc-color-info:             #2B6CB0;
--gc-color-info-light:       #EBF8FF;

/* ── CORES: Texto ─────────────────────────────────────────────────── */

--gc-text-heading:           var(--global-palette3, #1A202C);
--gc-text-strong:            var(--global-palette4, #2D3748);
--gc-text-body:              var(--global-palette5, #4A5568);
--gc-text-muted:             var(--global-palette6, #718096);
--gc-text-inverse:           var(--global-palette9, #FFFFFF);

/* ── CORES: Fundos ────────────────────────────────────────────────── */

--gc-bg-body:                var(--global-palette8, #F7FAFC);
--gc-bg-surface:             var(--global-palette9, #FFFFFF);
--gc-bg-muted:               var(--global-palette7, #EDF2F7);
--gc-bg-subtle:              #F0F4F8;

/* ── CORES: Bordas ────────────────────────────────────────────────── */

--gc-border-light:           #E2E8F0;
--gc-border-medium:          #CBD5E0;
--gc-border-strong:          #A0AEC0;

/* ── CORES: Links ─────────────────────────────────────────────────── */

--gc-link-color:             var(--gc-color-primary);
--gc-link-hover:             var(--gc-color-primary-dark);
--gc-link-visited:           #553C9A;

/* ── TIPOGRAFIA ───────────────────────────────────────────────────── */

--gc-font-body:              var(--global-body-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
--gc-font-heading:           var(--global-heading-font-family, inherit);
--gc-font-mono:              "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

/* Tamanhos — escala modular ~1.25 (major third) */
--gc-text-xs:                0.75rem;    /* 12px */
--gc-text-sm:                0.875rem;   /* 14px */
--gc-text-base:              1rem;       /* 16px */
--gc-text-md:                1.125rem;   /* 18px */
--gc-text-lg:                1.25rem;    /* 20px */
--gc-text-xl:                1.5rem;     /* 24px */
--gc-text-2xl:               1.875rem;   /* 30px */
--gc-text-3xl:               2.25rem;    /* 36px */
--gc-text-4xl:               3rem;       /* 48px */

/* Pesos */
--gc-weight-normal:          400;
--gc-weight-medium:          500;
--gc-weight-semibold:        600;
--gc-weight-bold:            700;

/* Altura de linha */
--gc-leading-tight:          1.3;
--gc-leading-normal:         1.7;
--gc-leading-relaxed:        1.8;

/* ── ESPAÇAMENTO ──────────────────────────────────────────────────── */

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

/* ── LAYOUT ───────────────────────────────────────────────────────── */

--gc-container-width:        var(--global-content-width, 1290px);
--gc-container-narrow:       var(--global-content-narrow-width, 842px);
--gc-container-edge:         var(--global-content-edge-padding, 1.5rem);

/* ── BORDAS & SOMBRAS ─────────────────────────────────────────────── */

--gc-radius-sm:              4px;
--gc-radius-md:              8px;
--gc-radius-lg:              12px;
--gc-radius-full:            9999px;

--gc-shadow-sm:              0 1px 2px rgba(0, 0, 0, 0.05);
--gc-shadow-md:              0 4px 6px rgba(0, 0, 0, 0.07);
--gc-shadow-lg:              0 10px 15px rgba(0, 0, 0, 0.1);

/* ── TRANSIÇÕES ───────────────────────────────────────────────────── */

--gc-transition-fast:        150ms ease;
--gc-transition-base:        250ms ease;
--gc-transition-slow:        350ms ease;

/* ── BREAKPOINTS (referência — usar em @media) ────────────────────
   Não são variáveis CSS (media queries não suportam var()),
   mas ficam documentados aqui como referência.

   Mobile:    < 640px
   Tablet:    640px – 1023px
   Desktop:   1024px – 1439px
   Wide:      >= 1440px
   ─────────────────────────────────────────────────────────────────── */
}

/* ── Override mobile ──────────────────────────────────────────────── */

@media (max-width: 639px) {
	:root {
		--gc-container-edge: 1rem; /* 16px */
	}
}