/* ============================================================================
   NewsFlow — DESIGN SYSTEM · parte 1/4 · §1 TOKENS (variáveis --nf-*)
   ----------------------------------------------------------------------------
   O design system foi dividido fisicamente (2026-07) conforme o runbook
   .codex/skills/newsflow-css-system, nos 4 arquivos abaixo. A ordem de carga
   no views/layout.ejs é PRESERVADA (tokens → base → layout → components), então
   a concatenação reproduz exatamente o antigo design-system.css — nada muda
   visualmente. Fonte única de estilo; semente do futuro @newsflow/ui-web.

     tokens.css      → §1  variáveis --nf-* (este arquivo)
     base.css        → §2  padrões do documento (+ utilitários .nf-*)
     layout.css      → §3  moldura: topbar / sidebar / conteúdo / hero
     components.css  → §4..§14 + responsivo  (componentes .nf-*)

   Contrato: só se estiliza via classes .nf-* e variáveis --nf-*. Sem hex soltos.
   Decisões (modificadores, sem perda): sidebar navy (padrão) × azul
   (.nf-app.is-sidebar-azul); cabeçalho de box sólido × suave (.nf-box__head--*).
   ============================================================================ */

/* ============================ §1 · TOKENS ============================ */
:root{
  /* Avisa o navegador do tema atual: pinta controles NATIVOS (inputs, selects,
     áreas contenteditable, barras de rolagem e o "canvas" de elementos sem fundo
     explícito) de acordo com o tema. Sem isto, no dark real esses elementos
     nativos continuam brancos com texto preto mesmo com o resto escuro. */
  color-scheme: light;
  /* Marca */
  --nf-primary:#2563eb; --nf-primary-strong:#1d4ed8; --nf-primary-dark:#1e3a8a; --nf-primary-soft:#dbeafe; --nf-on-primary:#fff;
  /* Neutros */
  --nf-text:#0f172a; --nf-text-soft:#475569; --nf-text-muted:#64748b;
  --nf-bg:#f4f6f9; --nf-surface:#fff; --nf-surface-2:#f8fafc; --nf-surface-3:#eef2f7;
  --nf-border:#dbe5f1; --nf-border-strong:#cbd5e1;
  /* Alerta / status (cada um com "soft" e "dark") */
  --nf-success:#218838; --nf-success-soft:#dcfce7; --nf-success-dark:#14532d;
  --nf-warning:#c2820a; --nf-warning-soft:#fef3c7; --nf-warning-dark:#7c4a03;
  --nf-danger:#dc2626;  --nf-danger-soft:#fee2e2;  --nf-danger-dark:#991b1b;
  --nf-info:#0e7490;    --nf-info-soft:#cffafe;    --nf-info-dark:#0c4a6e;
  --nf-purple:#7c3aed;  --nf-purple-soft:#ede9fe;  --nf-purple-dark:#4c1d95;
  /* -deep = tom ESCURO para usar como FUNDO com texto branco. Diferente do -dark
     (que é TEXTO sobre fundo -soft e por isso CLAREIA no tema escuro), o -deep
     NÃO é redefinido no escuro: continua escuro nos dois temas. Valores iguais
     aos -dark do claro, para o tema claro não mudar nada. */
  --nf-primary-deep:#1e3a8a; --nf-success-deep:#14532d; --nf-warning-deep:#7c4a03;
  --nf-danger-deep:#991b1b;  --nf-info-deep:#0c4a6e;    --nf-purple-deep:#4c1d95;
  /* Forma */
  --nf-radius-lg:16px; --nf-radius-md:12px; --nf-radius-sm:9px; --nf-radius-pill:999px;
  --nf-shadow-sm:0 1px 2px rgba(15,23,42,.06); --nf-shadow:0 8px 24px rgba(15,23,42,.08); --nf-shadow-lg:0 18px 48px rgba(15,23,42,.18);
  /* Espaçamento */
  --nf-space-1:4px; --nf-space-2:8px; --nf-space-3:12px; --nf-space-4:16px; --nf-space-5:24px; --nf-space-6:32px;
  /* Tipografia */
  --nf-font:"Poppins","Segoe UI",Roboto,Arial,sans-serif; --nf-font-head:"Montserrat","Segoe UI",sans-serif;
  --nf-select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* Chrome */
  --nf-topbar:#1e40af; --nf-sidebar:#0f1c33; --nf-sidebar-active:#1d4ed8; --nf-sidebar-text:#c7d2e4;
  --nf-z-topbar:100; --nf-z-modal:2000;
}
/* Tema escuro: só troca tokens → o app inteiro reskina.
   Vale tanto para .is-theme-dark (futuro) quanto para .nf-dark-chrome (a classe
   que o toggle já aplica hoje) → o dark real acende via o toggle existente. */
body.is-theme-dark,
body.nf-dark-chrome{
  color-scheme: dark;
  --nf-text:#e8eef7; --nf-text-soft:#b7c2d4; --nf-text-muted:#8a97ad;
  --nf-bg:#0b1220; --nf-surface:#111c33; --nf-surface-2:#0f1a30; --nf-surface-3:#16233f;
  --nf-border:#22304d; --nf-border-strong:#2c3d5f; --nf-primary:#3b82f6; --nf-primary-soft:#16233f;
  --nf-success-soft:#0e2a1c; --nf-warning-soft:#2c2410; --nf-danger-soft:#2c1414; --nf-info-soft:#0c2422; --nf-purple-soft:#1c1633;
  /* -dark = TEXTO sobre fundo -soft. No escuro o -soft ficou escuro, então o texto
     precisa CLAREAR (senão fica escuro-sobre-escuro, ilegível — ex.: badges/chips). */
  --nf-primary-dark:#93c5fd; --nf-success-dark:#86efac; --nf-warning-dark:#fcd34d; --nf-danger-dark:#fca5a5; --nf-info-dark:#7dd3fc; --nf-purple-dark:#c4b5fd;
  --nf-shadow:0 8px 24px rgba(0,0,0,.4); --nf-shadow-lg:0 18px 48px rgba(0,0,0,.55);
  /* topbar mantem o AZUL da marca (#1e40af do :root) mesmo no escuro — a pedido. */
  --nf-sidebar:#0a1120;
}