/* ==========================================================================
   Tokens do design "liquid glass" da intranet.
   Um único lugar para cor, tipografia, espaço, raio, sombra, vidro e movimento.
   Temas: claro (padrão), escuro e sistema (resolvido por js/tema-inicial.js).
   Os seletores aceitam [data-theme] em qualquer elemento para as miniaturas de
   Configurações → Aparência usarem os tokens reais (TEM-02).
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fonte: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-2xs: .6875rem;
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-md: .875rem;
  --t-base: .9375rem;
  --t-lg: 1.0625rem;
  --t-xl: 1.25rem;
  --t-2xl: 1.625rem;
  --t-3xl: 2.125rem;
  --t-4xl: 2.75rem;

  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-7: 32px;
  --e-8: 40px;
  --e-9: 56px;

  --r-xs: 8px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 30px;
  --r-pill: 999px;

  --mov-rapido: 140ms;
  --mov: 220ms;
  --mov-lento: 380ms;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --curva-mola: cubic-bezier(.34, 1.4, .64, 1);

  --vidro-blur: 22px;
  --vidro-blur-forte: 34px;
  --vidro-saturacao: 175%;

  --z-topo: 30;
  --z-menu: 40;
  --z-gaveta: 60;
  --z-overlay: 80;
  --z-toast: 100;

  --menu-largo: 268px;
  --menu-estreito: 78px;
  --conteudo-max: 1360px;
}

/* ---------- Tema claro (padrão) ---------- */
:root,
[data-theme="light"] {
  color-scheme: light;
  --fundo: #e8edf6;
  --fundo-ceu:
    radial-gradient(1100px 760px at 88% -12%, rgb(47 111 228 / .20), transparent 62%),
    radial-gradient(900px 640px at -12% 108%, rgb(16 24 61 / .16), transparent 60%),
    radial-gradient(760px 520px at 42% 46%, rgb(214 220 234 / .55), transparent 72%),
    linear-gradient(180deg, #f5f7fb 0%, #e6ebf4 100%);
  --mancha-1: rgb(64 120 255 / .30);
  --mancha-2: rgb(16 24 61 / .20);
  --mancha-3: rgb(170 150 255 / .20);

  --texto: #0d1530;
  --texto-2: #333e60;
  --texto-3: #56607f;
  --texto-inverso: #ffffff;

  --linha: rgb(16 24 61 / .10);
  --linha-forte: rgb(16 24 61 / .18);

  --vidro-1: rgb(255 255 255 / .55);
  --vidro-2: rgb(255 255 255 / .70);
  --vidro-3: rgb(255 255 255 / .86);
  --vidro-solido: #f6f8fc;
  --vidro-solido-2: #ffffff;
  --vidro-borda-ext: rgb(16 24 61 / .09);
  --vidro-aro: linear-gradient(140deg, rgb(255 255 255 / .98), rgb(255 255 255 / .30) 34%, rgb(255 255 255 / .05) 58%, rgb(255 255 255 / .55));
  --vidro-reflexo: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(16 24 61 / .035);
  --vidro-brilho: radial-gradient(120% 80% at 0% 0%, rgb(255 255 255 / .55), transparent 55%);

  --sombra-1: 0 1px 2px rgb(13 21 48 / .05), 0 6px 18px rgb(13 21 48 / .07);
  --sombra-2: 0 2px 6px rgb(13 21 48 / .06), 0 18px 44px rgb(13 21 48 / .12);
  --sombra-3: 0 8px 24px rgb(13 21 48 / .12), 0 40px 90px rgb(13 21 48 / .22);

  --campo: rgb(255 255 255 / .78);
  --campo-foco: #ffffff;
  --campo-borda: rgb(16 24 61 / .16);
  --hover: rgb(16 24 61 / .055);
  --ativo: rgb(16 24 61 / .09);
  --foco: 0 0 0 3px rgb(47 111 228 / .42);

  --ok: #0b6a43;
  --ok-fundo: rgb(16 150 90 / .13);
  --aviso: #885000;
  --aviso-fundo: rgb(230 160 30 / .18);
  --erro: #b42318;
  --erro-fundo: rgb(220 50 40 / .11);
  --info: #1d4fbf;
  --info-fundo: rgb(47 111 228 / .12);

  --scrim: rgb(10 16 40 / .30);
  --ruido-opacidade: .035;
}

/* ---------- Tema escuro ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --fundo: #060a17;
  --fundo-ceu:
    radial-gradient(1100px 760px at 88% -12%, rgb(53 99 233 / .30), transparent 60%),
    radial-gradient(1000px 700px at -12% 110%, rgb(38 55 109 / .55), transparent 62%),
    radial-gradient(800px 560px at 45% 40%, rgb(70 90 160 / .16), transparent 70%),
    linear-gradient(180deg, #0b1124 0%, #060914 100%);
  --mancha-1: rgb(53 99 233 / .34);
  --mancha-2: rgb(96 60 200 / .20);
  --mancha-3: rgb(20 140 200 / .16);

  --texto: #eef2fb;
  --texto-2: #c4cce0;
  --texto-3: #98a3c0;
  --texto-inverso: #0d1530;

  --linha: rgb(255 255 255 / .09);
  --linha-forte: rgb(255 255 255 / .16);

  --vidro-1: rgb(16 23 44 / .52);
  --vidro-2: rgb(20 28 54 / .62);
  --vidro-3: rgb(24 33 62 / .86);
  --vidro-solido: #121a31;
  --vidro-solido-2: #182140;
  --vidro-borda-ext: rgb(0 0 0 / .38);
  --vidro-aro: linear-gradient(140deg, rgb(255 255 255 / .30), rgb(255 255 255 / .07) 34%, rgb(255 255 255 / 0) 58%, rgb(255 255 255 / .12));
  --vidro-reflexo: inset 0 1px 0 rgb(255 255 255 / .10), inset 0 -1px 0 rgb(0 0 0 / .25);
  --vidro-brilho: radial-gradient(120% 80% at 0% 0%, rgb(255 255 255 / .08), transparent 55%);

  --sombra-1: 0 1px 2px rgb(0 0 0 / .30), 0 8px 22px rgb(0 0 0 / .28);
  --sombra-2: 0 2px 8px rgb(0 0 0 / .35), 0 22px 54px rgb(0 0 0 / .42);
  --sombra-3: 0 10px 30px rgb(0 0 0 / .45), 0 48px 110px rgb(0 0 0 / .58);

  --campo: rgb(8 12 26 / .50);
  --campo-foco: rgb(8 12 26 / .78);
  --campo-borda: rgb(255 255 255 / .14);
  --hover: rgb(255 255 255 / .06);
  --ativo: rgb(255 255 255 / .10);
  --foco: 0 0 0 3px rgb(120 160 255 / .55);

  --ok: #56d8a0;
  --ok-fundo: rgb(79 211 154 / .14);
  --aviso: #f5c46a;
  --aviso-fundo: rgb(244 192 99 / .15);
  --erro: #ff9289;
  --erro-fundo: rgb(255 138 128 / .15);
  --info: #9dbaff;
  --info-fundo: rgb(147 180 255 / .15);

  --scrim: rgb(0 0 0 / .55);
  --ruido-opacidade: .05;
}

/* ---------- Gráficos (uma série: rampa azul validada; independente do destaque) ----------
   Validado com o verificador de paletas (ordinal, um matiz): claro 3,36:1 e escuro 3,76:1 no passo suave. */
:root { --grafico-1: #1f4fb8; --grafico-1-suave: #6a86cb; --grafico-grade: rgb(13 21 48 / .10); --grafico-trilha: rgb(31 79 184 / .12); }
[data-theme="dark"] { --grafico-1: #9db8ff; --grafico-1-suave: #5872c0; --grafico-grade: rgb(255 255 255 / .10); --grafico-trilha: rgb(157 184 255 / .14); }
/* Séries categóricas (identidade de até 4 séries, ordem fixa, sempre com rótulo visível). Validadas: CVD adjacente ≥ 8,4; visão normal ≥ 19,8. */
:root { --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a; --serie-4: #eda100; }
[data-theme="dark"] { --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500; }

/* ---------- Cor de destaque (eixo independente do tema) ---------- */
:root,
[data-accent="navy"] {
  --destaque: #10183d;
  --destaque-forte: #0a102b;
  --destaque-texto: #ffffff;
  --destaque-tinta: #1b2a6b;
  --destaque-suave: rgb(16 24 61 / .09);
  --destaque-brilho: rgb(64 110 230 / .35);
}
[data-accent="azul"] {
  --destaque: #1f5ad6;
  --destaque-forte: #1849b2;
  --destaque-texto: #ffffff;
  --destaque-tinta: #1a4fc0;
  --destaque-suave: rgb(31 90 214 / .11);
  --destaque-brilho: rgb(31 90 214 / .38);
}
[data-accent="verde"] {
  --destaque: #0e7a55;
  --destaque-forte: #0a6145;
  --destaque-texto: #ffffff;
  --destaque-tinta: #0b6b4a;
  --destaque-suave: rgb(14 122 85 / .11);
  --destaque-brilho: rgb(14 160 110 / .35);
}
[data-accent="grafite"] {
  --destaque: #2b3242;
  --destaque-forte: #1d2230;
  --destaque-texto: #ffffff;
  --destaque-tinta: #2b3242;
  --destaque-suave: rgb(43 50 66 / .10);
  --destaque-brilho: rgb(120 130 160 / .35);
}
[data-theme="dark"],
[data-theme="dark"][data-accent="navy"],
[data-theme="dark"] [data-accent="navy"] {
  --destaque: #3563e9;
  --destaque-forte: #2a52c9;
  --destaque-texto: #ffffff;
  --destaque-tinta: #a7c0ff;
  --destaque-suave: rgb(76 125 255 / .18);
  --destaque-brilho: rgb(76 125 255 / .45);
}
[data-theme="dark"][data-accent="azul"],
[data-theme="dark"] [data-accent="azul"] {
  --destaque: #2f66e6;
  --destaque-forte: #2553c4;
  --destaque-tinta: #9ec0ff;
  --destaque-suave: rgb(60 120 255 / .18);
  --destaque-brilho: rgb(60 120 255 / .45);
}
[data-theme="dark"][data-accent="verde"],
[data-theme="dark"] [data-accent="verde"] {
  --destaque: #12825b;
  --destaque-forte: #0e6a4a;
  --destaque-tinta: #7fe0b6;
  --destaque-suave: rgb(40 200 140 / .16);
  --destaque-brilho: rgb(40 200 140 / .38);
}
[data-theme="dark"][data-accent="grafite"],
[data-theme="dark"] [data-accent="grafite"] {
  --destaque: #5b6478;
  --destaque-forte: #4a5265;
  --destaque-tinta: #d5dbea;
  --destaque-suave: rgb(200 210 235 / .12);
  --destaque-brilho: rgb(170 180 210 / .30);
}