/* PediatricDX — Design Tokens (fonte única de verdade)
   Linguagem premium "clean editorial + profundidade sutil".
   Cores canônicas + escalas (tipografia/espaço/raio/sombra/motion).
   Aliases mantêm compatibilidade com nomes antigos (--blue/--teal/--green/--red/--surface).
   Tema escuro sobrescreve apenas os canônicos; os aliases herdam via var(). */

:root{
  /* ---- cor: marca / destaque ---- */
  --accent:#2563eb;        /* azul confiança — destaque/navegação */
  --accent-700:#1d4ed8;
  --accent-600:#2563eb;
  --accent2:#0ea5e9;       /* teal — gradientes/secundário */

  /* ---- cor: semântica de estado ---- */
  --ok:#16a34a;            /* sucesso/normal */
  --warn:#d97706;          /* atenção */
  --bad:#dc2626;           /* alerta (vermelho SÓ para alerta) */

  /* ---- cor: neutros / superfícies (tom editorial, levemente frio) ---- */
  --ink:#0d1730;           /* texto principal (mais profundo p/ contraste premium) */
  --ink-soft:#243049;      /* títulos secundários */
  --muted:#5b6b86;         /* texto secundário */
  --faint:#8a98b0;         /* legendas/placeholders */
  --bg:#f5f8fd;            /* fundo da aplicação */
  --bg-tint:#eef3fb;       /* faixa alternada */
  --panel:#ffffff;         /* cartões */
  --panel2:#ffffff;        /* barras (sidebar/topbar) */
  --panel-elev:#ffffff;    /* superfície elevada (modais) */
  --surface:#ffffff;       /* alias semântico de superfície */
  --line:#e7ecf5;          /* bordas/divisores (mais suave) */
  --line-strong:#d4dcea;   /* divisor com mais presença */

  /* tints específicos */
  --accent-50:#eef4ff;
  --accent-100:#dbe7ff;
  --ok-50:#e9f9ef;
  --warn-50:#fef6e7;
  --bad-50:#fdecec;

  /* ---- tipografia ---- */
  --font-display:'Sora','Plus Jakarta Sans',Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-num:'Inter',ui-monospace,system-ui,sans-serif; /* tabular p/ dados clínicos */

  /* escala tipográfica (fluida, premium) — UMA escala para todo o site */
  /* escala -10% (global) */
  --fs-xs:11px; --fs-sm:12px; --fs-md:13.5px; --fs-lg:16px;
  --fs-xl:20px; --fs-2xl:25px; --fs-3xl:clamp(29px,3.6vw,40px); --fs-4xl:clamp(36px,5.4vw,58px);
  --lh-tight:1.12; --lh-snug:1.3; --lh-body:1.6;
  --tracking-tight:-.02em; --tracking-display:-.03em;

  /* ───────────────────────────────────────────────────────────────────
     CONTRATO DE HIERARQUIA TIPOGRÁFICA (aplicar em TODAS as telas)
     papel                      tamanho     fonte/peso                     uso
     hero/display (só landing)  --fs-4xl    display 800 / tracking-display  título principal da landing
     título de página (h1)      --fs-2xl    display 700 / tracking-tight    título da tela/topbar
     título de seção (h2)       --fs-xl     display 700                     blocos grandes
     título de card (h3)        --fs-lg     display 600                     cabeçalho de card
     subtítulo (h4)             --fs-md     sans 600                        sub-bloco
     KICKER (rótulo CAIXA ALTA) --fs-xs     sans 600 / --faint / .07em      rótulo de campo/seção
     corpo / texto              --fs-md     sans 400 / lh-body              parágrafos, valores
     secundário / small         --fs-sm     sans 400 / --muted             apoio, metadados
     legenda / micro            --fs-xs     sans 400 / --faint             timestamps, dicas
     número/KPI grande          --fs-2xl    display 800 / tabular           métricas em destaque
     tabela: th --fs-xs CAIXA ALTA --muted ; td --fs-sm
     botão --fs-sm/--fs-md ; input 16px (anti-zoom mobile)
     Evite tamanhos avulsos em em/px fora desta escala.
     ─────────────────────────────────────────────────────────────────── */

  /* ---- escala de espaçamento (base 4) ---- */
  --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; --sp-20:80px; --sp-24:96px;

  /* ---- escala de raio ---- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;

  /* ---- elevação premium (sombras em camadas, suaves) ---- */
  --shadow-sm:0 1px 2px rgba(13,23,48,.04), 0 1px 3px rgba(13,23,48,.06);
  --shadow:0 2px 4px rgba(13,23,48,.04), 0 10px 24px -8px rgba(13,23,48,.10);
  --shadow-md:0 4px 8px rgba(13,23,48,.05), 0 16px 36px -12px rgba(13,23,48,.14);
  --shadow-lg:0 12px 28px -8px rgba(13,23,48,.16), 0 6px 12px rgba(13,23,48,.05);
  --shadow-xl:0 32px 70px -16px rgba(37,99,235,.22), 0 8px 20px -8px rgba(13,23,48,.12);
  --ring:0 0 0 3px rgba(37,99,235,.18); /* foco/realce */

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-1:.14s; --dur-2:.22s; --dur-3:.4s;

  /* gradiente de marca (uso pontual, com classe) */
  --grad-brand:linear-gradient(135deg,#2563eb 0%,#0ea5e9 100%);

  /* ---- ALIASES de compatibilidade (nomes antigos → canônicos) ---- */
  --blue:var(--accent); --blue-700:var(--accent-700); --blue-50:var(--accent-50);
  --teal:var(--accent2);
  --green:var(--ok); --green-50:var(--ok-50);
  --amber:var(--warn);
  --red:var(--bad);
  --r:var(--r-lg);
}

/* ---- tema escuro: sobrescreve só os canônicos (aliases herdam) ---- */
[data-theme="dark"]{
  --accent:#60a5fa; --accent-700:#3b82f6; --accent-600:#3b82f6; --accent2:#38bdf8;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --ink:#e8eef9; --ink-soft:#c4d0e4; --muted:#9aa8c0; --faint:#6b7a93;
  --bg:#0b1120; --bg-tint:#0f172a; --panel:#161f33; --panel2:#131b2c; --panel-elev:#1b2740; --surface:#161f33;
  --line:#273450; --line-strong:#33425f;
  --accent-50:rgba(96,165,250,.14); --accent-100:rgba(96,165,250,.22);
  --ok-50:rgba(34,197,94,.14); --warn-50:rgba(245,158,11,.14); --bad-50:rgba(239,68,68,.14);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 2px 6px rgba(0,0,0,.4), 0 12px 28px -10px rgba(0,0,0,.55);
  --shadow-md:0 6px 16px rgba(0,0,0,.45), 0 18px 40px -12px rgba(0,0,0,.6);
  --shadow-lg:0 16px 36px -8px rgba(0,0,0,.6);
  --shadow-xl:0 32px 70px -16px rgba(0,0,0,.7);
  --ring:0 0 0 3px rgba(96,165,250,.30);
  --grad-brand:linear-gradient(135deg,#3b82f6 0%,#0ea5e9 100%);
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-1:.001s; --dur-2:.001s; --dur-3:.001s; }
}