/*
 * ============================================================
 * NAVEGA — Design Tokens
 * Fonte única de verdade visual para todos os agentes.
 * NÃO editar valores sem atualizar também design-tokens.json.
 * ============================================================
 */

/* Google Fonts — Roboto 400, 500, 700 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* ============================================================
   TOKENS GLOBAIS (desktop-first)
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     CORES — Marca
     Regra 80/15/5: 80% neutros · 15% azul estrutural · 5% Azul Principal
     ---------------------------------------------------------- */

  --color-primary:        #2563EB; /* Azul Principal — CTA, links, destaques */
  --color-primary-dark:   #1A4FBF; /* Hover do botão primário */
  --color-secondary:      #001C4D; /* Azul Marinho — hero, capa, footer */
  --color-blue-support:   #1E4094; /* Azul de Apoio — gradientes, profundidade */
  --color-blue-light:     #D4E6FF; /* Azul Claro — fundos suaves, cards */

  /* ----------------------------------------------------------
     CORES — Texto
     ---------------------------------------------------------- */

  --color-text:           #13110C; /* Quase Preto — body principal */
  --color-text-secondary: #3D3D3D; /* Cinza Escuro — subtítulos, captions */
  --color-text-muted:     #8A8A8A; /* Cinza Médio — labels, placeholders */
  --color-text-inverse:   #FFFFFF; /* Branco — texto sobre fundos escuros */

  /* ----------------------------------------------------------
     CORES — Superfícies
     ---------------------------------------------------------- */

  --color-background:     #FFFFFF;
  --color-surface:        #F0F0F0; /* Cinza claro — seções alternadas */
  --color-surface-dark:   #001C4D; /* Azul Marinho — seções de destaque */
  --color-surface-footer: #13110C; /* Quase Preto — footer */

  /* ----------------------------------------------------------
     CORES — Bordas
     ---------------------------------------------------------- */

  --color-border:         #E0E0E0;
  --color-border-focus:   #2563EB;
  --color-border-accent:  #2563EB;

  /* ----------------------------------------------------------
     CORES — Semânticas (estados de UI — nunca decorativas)
     ---------------------------------------------------------- */

  --color-error:          #C0392B;
  --color-error-bg:       #FDECEA;
  --color-success:        #27AE60;
  --color-success-bg:     #E8F8F0;
  --color-warning:        #F39C12;
  --color-warning-bg:     #FEF9E7;

  /* ----------------------------------------------------------
     TIPOGRAFIA — Família
     ---------------------------------------------------------- */

  --font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ----------------------------------------------------------
     TIPOGRAFIA — Pesos
     ---------------------------------------------------------- */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* ----------------------------------------------------------
     TIPOGRAFIA — Tamanhos (desktop)
     ---------------------------------------------------------- */

  --text-h1:       2.5rem;    /* 40px */
  --text-h2:       1.75rem;   /* 28px */
  --text-h3:       1.25rem;   /* 20px */
  --text-h4:       1.0625rem; /* 17px */
  --text-body-lg:  1.125rem;  /* 18px */
  --text-body:     1rem;      /* 16px */
  --text-body-sm:  0.875rem;  /* 14px */
  --text-caption:  0.75rem;   /* 12px */
  --text-label:    0.875rem;  /* 14px */
  --text-quote:    1.375rem;  /* 22px */

  /* ----------------------------------------------------------
     TIPOGRAFIA — Line-heights
     ---------------------------------------------------------- */

  --leading-h1:      1.2;
  --leading-h2:      1.25;
  --leading-h3:      1.3;
  --leading-body-lg: 1.7;
  --leading-body:    1.6;
  --leading-body-sm: 1.5;
  --leading-quote:   1.5;

  /* ----------------------------------------------------------
     TIPOGRAFIA — Letter-spacing
     ---------------------------------------------------------- */

  --tracking-h1:    -0.01em;
  --tracking-body:   0;
  --tracking-label:  0.03em;

  /* ----------------------------------------------------------
     ESPAÇAMENTO (sistema 8px — múltiplos de 4px)
     Nunca usar valores quebrados: 10px, 15px, 22px etc.
     ---------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
  --space-11: 160px;

  /* ----------------------------------------------------------
     GRID E BREAKPOINTS
     ---------------------------------------------------------- */

  --container-max:          1280px;
  --container-padding:      48px;  /* desktop */
  --container-padding-tab:  32px;  /* tablet */
  --container-padding-mob:  20px;  /* mobile */

  --gutter-desktop: 24px;
  --gutter-tablet:  20px;
  --gutter-mobile:  16px;

  --bp-mobile:  375px;
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1280px;

  /* ----------------------------------------------------------
     BORDAS E RAIOS
     ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-pill: 999px;

  /* ----------------------------------------------------------
     SOMBRAS
     ---------------------------------------------------------- */

  --shadow-card:        0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-card-hover:  0 4px 16px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-button:      0 2px 8px rgba(37,99,235,0.30);
  --shadow-header:      0 1px 0 rgba(0,0,0,0.08);

  /* ----------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------- */

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-header:   200;
  --z-modal:    300;
  --z-toast:    400;

  /* ----------------------------------------------------------
     TRANSIÇÕES
     ---------------------------------------------------------- */

  --transition-base: 150ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

}

/* ============================================================
   TOKENS MOBILE (≤ 767px)
   Sobrescreve apenas os tokens de tipografia.
   ============================================================ */

@media (max-width: 767px) {
  :root {
    --text-h1:      1.875rem;   /* 30px */
    --text-h2:      1.375rem;   /* 22px */
    --text-h3:      1.25rem;    /* 20px */
    --text-body-lg: 1.0625rem;  /* 17px */

    --container-padding: var(--container-padding-mob);
  }
}

/* ============================================================
   TOKENS TABLET (768px – 1023px)
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-padding: var(--container-padding-tab);
  }
}