/* =========================================================================
   GSEC · tokens.css
   Custom properties extraídas fielmente do Design System GSEC.
   Fonte: gsec-design-system/design-system.html + CSS do tema (newsfront).
   ========================================================================= */
:root {
  /* ---- Tipografia ---- */
  --font: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-root: 14px;            /* tamanho base do tema */

  /* Escala (valores reais documentados no DS) */
  --fs-h1: 32px;             /* Título 1 · 700 */
  --fs-h2: 18px;             /* Título 2 / seção · 700 · .05em */
  --fs-feature: 24px;        /* Título de destaque (.top-news__main-title) · 500 */
  --fs-card: 14px;           /* Título de cartão (.article-link__title) · 500 */
  --fs-body: 18px;           /* Parágrafo de matéria · 400 · lh 22px */
  --fs-meta: 14px;           /* meta / .date-style · 500 */
  --fs-caption: 12px;        /* legenda / .tag */
  --lh-body: 1.55;
  --lh-tight: 1.3;
  --ls-head: 0.05em;

  /* ---- Cores de marca / texto (identidade GSEC 2026) ----
     Destaque = Verde #0D7A23 · Escuro = Azul #062D56 · Realce = Amarelo #FDC603
     · Texto = Cinza #434343 · Suave = Azul/cinza #9AADC4 */
  --c-accent: #0D7A23;       /* destaque (links hover, .tag--red, barra de título) */
  --c-accent-2: #0E7624;     /* fim do gradiente da marca / verde escuro */
  --c-accent-soft: #E6F3E9;  /* superfície suave do destaque (verde claro) */
  --c-yellow: #FDC603;       /* realce / identidade */
  --c-yellow-2: #FCCB0C;     /* realce alternativo */
  --c-ink: #434343;          /* texto forte (cinza de identidade) */
  --c-ink-2: #5a6b78;        /* texto suave / meta (.date-style) */
  --c-ink-3: #9AADC4;        /* texto terciário (azul/cinza claro) */
  --c-text: #434343;         /* cor base do texto */
  --c-tag-text: #666666;     /* texto de etiqueta padrão */
  --c-blue: #062D56;         /* azul escuro de identidade / .tag--blue */
  --c-blue-active: #06315D;  /* .btn-8:active */

  /* ---- Superfícies / linhas ---- */
  --c-canvas: #ffffff;       /* fundo da página */
  --c-canvas-2: #f4f7f5;     /* fundo alternativo (faixas) — verde-acinzentado sutil */
  --c-surface: #ffffff;
  --c-surface-2: #eceff1;    /* .main-head, .tag, chips */
  --c-dark: #062D56;         /* rodapé, base do btn-8, header escuro (azul) */
  --c-dark-face: #345a86;    /* face 3D lateral do btn-8 (azul médio) */
  --c-line: #cfd8dc;         /* bordas de cartões / blocos */
  --c-line-2: #eef2f4;       /* linhas suaves */
  --c-divider: #cccccc;      /* separadores, blockquote */

  /* ---- Gradientes ---- */
  --grad-brand: linear-gradient(90deg, #062D56 0%, #0D7A23 100%);   /* barra da marca, btn-8b/8d */
  --grad-hero: linear-gradient(115deg, #06315D 0%, #0a5a3a 46%, #0D7A23 108%);
  --grad-placeholder: linear-gradient(135deg, #dfe5e8 0%, #eceff1 100%);
  --grad-placeholder-brand: linear-gradient(135deg, #062D56 0%, #0D7A23 100%);

  /* ---- Raios / sombras ---- */
  --radius: 12px;            /* cartões da camada de portal */
  --radius-sm: 8px;
  --radius-xs: 3px;          /* componentes do tema (.btn, .tag) */
  --shadow-sm: 0 1px 2px rgba(38,50,56,.05), 0 1px 3px rgba(38,50,56,.07);
  --shadow-md: 0 10px 30px -12px rgba(38,50,56,.22), 0 3px 8px rgba(38,50,56,.06);
  --shadow-pop: 0 5px 7px 0 rgba(22,28,33,.3);

  /* ---- Espaçamento (escala 4px) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* ---- Layout ---- */
  --container: 1170px;       /* .container do tema */
  --container-pad: 15px;
  --reading: 720px;          /* medida confortável p/ matéria */
  --gutter: 20px;
  --z-header: 9000;
  --z-drawer: 10000;
  --z-toast: 100001;

  /* ---- Breakpoints (referência; usados via @media nos arquivos) ----
     mobile  < 640px · tablet 640–1023 · desktop 1024–1439 · wide >= 1440 */

  /* ---- Cores por editoria (configuráveis) — família verde/azul/âmbar/grafite ---- */
  --ed-historia: #9a6b00;          /* âmbar/dourado (dialoga com o amarelo) */
  --ed-geopolitica: #062D56;       /* azul escuro de identidade */
  --ed-defesa: #0D7A23;            /* verde de identidade */
  --ed-seguranca: #0f5c8c;         /* azul médio */
  --ed-gestao-lideranca: #0E7624;  /* verde escuro */
  --ed-interesse-nacional: #434343;/* grafite */
  --ed-interesse-geral: #6b7a8c;   /* azul-cinza */
}