/*
 * shared/tokens.css — CAMADA DE TOKENS (v3 · GXON 100%)
 * ------------------------------------------------------------------
 * Sprint 29 — adoção da paleta INTEIRA do GXON (o antigo tokens.css era
 * uma reconciliação "cor do repo + ritmo do GXON"; as cores do repo eram
 * de teste). Agora: COR e RITMO vêm do GXON.
 *
 * MESMOS NOMES DE TOKEN, valores novos → nenhuma página muda de markup;
 * todas herdam a paleta GXON de uma vez. Valores extraídos do styles.css
 * compilado do GXON (--bs-*).
 *
 * FUNDO x CARDS (jeito do GXON): o fundo de página é frio #F4F6FA (S32; era
 * off-white #FDFDFD, "lavado"); as superfícies (sidebar/header/cards) são #FFF
 * (var(--bs-body-bg)). O card se recorta por BORDA (--border #E8EBF1) +
 * sombra leve + raio 10px. Os cinzas (#F9F9F9) ficam nas faixas secundárias
 * (--surface2): cabeçalho de tabela, hover de linha, input-group.
 *
 * TEXTO (jeito do GXON): título forte navy (--text #0C243C) + corpo mais
 * claro (--text2 corpo AA, S32). Escuro: fundo grafite-neutro #1E2230 (S32;
 * era navy-roxo #282B44, "azulado demais"), título quase-branco.
 *
 * Status: mantêm o papel duplo de hoje (cor forte usada como preenchimento
 * E como texto sobre o tint --*2). A separação fina solid/subtle entra nos
 * PRs de componentes (variantes GXON subtle/emphasis).
 *
 * Aditivos novos: --secondary (laranja GXON), --secondary-soft, --accent-hover.
 *
 * TEMA: data-theme no <html>, vindo do Shell; default claro; NUNCA
 * prefers-color-scheme. As camadas TIPO/RAIO/ESPAÇO/ELEVAÇÃO seguem sendo
 * as do ritmo GXON (inalteradas).
 * ------------------------------------------------------------------
 */

/* ===== Plus Jakarta Sans — VENDOR LOCAL (npm @fontsource, sem CDN) ===== */
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:400;
  font-display:swap;
  src:url('/vendor/fonts/plus-jakarta-sans/plus-jakarta-sans-400.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:500;
  font-display:swap;
  src:url('/vendor/fonts/plus-jakarta-sans/plus-jakarta-sans-500.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600;
  font-display:swap;
  src:url('/vendor/fonts/plus-jakarta-sans/plus-jakarta-sans-600.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:700;
  font-display:swap;
  src:url('/vendor/fonts/plus-jakarta-sans/plus-jakarta-sans-700.woff2') format('woff2');
}

:root{
  color-scheme:light; /* S38: controles nativos (popup do select, date picker, scrollbar) seguem o TEMA DO APP, nao o do SO */
  /* ================================================================
     1. ESTRUTURAIS — paleta GXON 100% (claro)
     ================================================================ */
  /* S32 — recalibração da paleta base (Frente A · "Névoa fria"): fundo
     levemente frio (#F4F6FA) p/ o card branco RECORTAR (antes #FDFDFD ~ #FFF,
     "lavado"); corpo escurecido (#586A86) até passar WCAG AA (antes #97A1C0
     ~2,6:1, reprovava). Mesmos nomes de token → markup inalterado. */
  --bg:#F4F6FA;
  --surface:#FFFFFF;
  --chrome:#FFFFFF;   /* S38 · chrome do Shell (sidebar/topbar) — claro = surface */
  --surface2:#EDF0F6;  --surface-2:#EDF0F6;   /* faixa/cabeçalho/hover (cinza frio GXON) */
  --surface3:#E4E9F1;
  --hover:#EDF0F6;

  /* bordas — cinza-azulado frio do GXON */
  --border:#E0E5EF;  --border2:#CED6E4;

  /* texto (dois esquemas de nome) — título navy forte + corpo AA (S32) */
  --text:#0C243C;
  --text2:#586A86;   --muted:#586A86;
  --text3:#8A94AC;   --faint:#8A94AC;
  --text4:#CBD1E0;

  /* marca navy + acento azul GXON (#316AFF) */
  --blue:#1E3A5F;    --navy:#1E3A5F;
  --brand:#316AFF;   --brand-fill:#316AFF;  --brand-fill-h:#2856E0;  --brand-soft:#EAF0FF;
  --accent:#316AFF;  --accent-soft:#EAF0FF;  --accent-hover:#2856E0;
  --active-bg:#EAF0FF;  --active-color:#316AFF;
  --nav-active:#EDF0F6;   /* S38 · fundo do item de menu selecionado (neutro, visivel no branco) */
  --blue2:#026AA2;   /* azul info (não confundir com o acento) */

  /* secundária GXON (laranja) — aditivo, disponível pros componentes */
  --secondary:#FF8110;  --secondary-soft:#FFF2E6;

  /* status semântico (hues do GXON, calibrados p/ contraste de texto nos tints) */
  --red:#D92D18;--red2:#FFECE8;--green:#0E7A58;--green2:#E9F7F2;--orange:#8A5B0B;--orange2:#FFF8E9;
  --yellow:#FDBB1F;--yellow2:#FFF8E9;--blue2s:#E6F8FF;--gold-fg:#8A5B0B;--purple:#6941C6;--purple2:#F4EBFF;

  /* perspectivas BSC (S45) — subiram do metas.css, onde só existiam nas páginas
     que carregavam aquele arquivo. Quando o Fechamento precisou das mesmas cores
     nos selos de setor, repetiu os hex com color-mix. Cor de domínio que dois
     módulos reusam nasce AQUI (mesma lição da paleta --chart-* da S42).
     F = Financeiro · C = Clientes · P = Processos · A = Aprendizado. */
  --persp-F-bg:#E6F5EE;--persp-F-bd:#BFE6D3;--persp-F-pill:#D3EDDF;--persp-F-tx:#0B6E4F;
  --persp-C-bg:#FCECEC;--persp-C-bd:#F3CBCE;--persp-C-pill:#F8DADC;--persp-C-tx:#B23A48;
  --persp-P-bg:#EAF1F6;--persp-P-bd:#C8DBE8;--persp-P-pill:#DCE8F1;--persp-P-tx:#33566E;
  --persp-A-bg:#F1EBFB;--persp-A-bd:#D8C9F2;--persp-A-pill:#E7DEF7;--persp-A-tx:#5B3A9E;
  /* A cor FORTE de cada perspectiva — os 4 hex que viviam cravados no metas.js.
     Vale nos dois temas de propósito: ela é usada como PREENCHIMENTO com texto
     branco por cima (o chip de 26px, o realce do modal), e nesse papel funciona
     no claro e no escuro. Como TEXTO sobre fundo escuro ela falha — o violeta
     do A vibra em vez de ler —, e para texto quem serve é o -tx acima. */
  --persp-F-cor:#0F8A63;--persp-C-cor:#D14D5A;--persp-P-cor:#3E6B8A;--persp-A-cor:#6D28D9;

  /* atingimento de meta (S45) — as quatro faixas de resultado, subidas do
     metas.css. NÃO é "status": status de fluxo (aberta/fechada, triagem/aceita)
     é outra coisa e cada módulo tem o seu. Isto é o quanto de uma meta foi
     alcançado, e serve a qualquer módulo que meça alvo × realizado.
     Par bg/fg por faixa: o fg lê sobre o bg no tema correspondente. */
  --atingimento-nao-bg:#FCEBEA;--atingimento-nao-fg:#C0392B;
  --atingimento-min-bg:#FBF0D8;--atingimento-min-fg:#B7791F;
  --atingimento-ati-bg:#E1F5EE;--atingimento-ati-fg:#0F7A5F;
  --atingimento-sup-bg:#E7EEFD;--atingimento-sup-fg:#2563EB;

  /* urgência de prazo (S45) — escala ORDENADA de 6 degraus, subida do metas.css.
     1 = prazo vencido · 2 = ≤15 dias · 3 = ≤30 · 4 = ≤60 · 5 = <90 · 6 = +90.
     A numeração é proposital: um módulo com menos degraus escolhe os que
     precisa sem que o nome minta (mesma convenção de --surface2/3, --text2/3/4).
     Hoje só o Metas consome; o Fechamento resolve urgência com --red puro, mais
     grosseiro — candidato natural a adotar esta régua. */
  --prazo-1-bg:#B42318;--prazo-1-fg:#FFFFFF;--prazo-2-bg:#FBE9E7;--prazo-2-fg:#B42318;--prazo-3-bg:#FBEAD5;--prazo-3-fg:#B4530B;
  --prazo-4-bg:#F7F0CC;--prazo-4-fg:#8A6A00;--prazo-5-bg:#E8F1DE;--prazo-5-fg:#4A7A33;--prazo-6-bg:#E1F5EE;--prazo-6-fg:#0F6E56;

  /* notificação — contador de alertas na sidebar e no sino do Shell.
     S45: o token existia desde a S29 com ZERO consumidores, enquanto o
     .badge-alertas carregava os quatro hex cravados no index.css. Aqui ele
     recebe os valores que estavam em produção (troca sem mudança de pixel);
     o #FF401C/#FF6A52 original ficou registrado no backlog como afinação de
     cor, separada da limpeza estrutural. */
  --badge:#e5484d;

  /* viz (S42 · Disponibilidades) — cores de SÉRIE dos gráficos (âncora, valem
     nos 2 temas) + grid/eixo (estes trocam no escuro). Cor semântica de domínio
     que dois módulos podem reusar nasce AQUI, não no CSS de uma página (lição S41).
     S45 — a família era --v-cc/-ap/-cx/-ex/-lim: abreviações do vocabulário de
     CONTAS (conta corrente, aplicação, caixa, extrato, limite). Mas o gráfico não
     desenha contas, desenha PAPÉIS: a série medida e a linha de referência. Três
     dos cinco nunca tiveram consumidor — e o Piso, que é um limite, estava pintado
     com o token "caixa" enquanto o "limite" sobrava sem uso. Sobraram os dois
     papéis reais; os mortos saíram (a mesma regra do .data-list: não criar variante
     sem uso). O --grid/--axis ganharam o prefixo da família: sozinhos eram nomes
     grandes demais para o que são, e "grid" é o primeiro nome que um token de
     layout vai querer. */
  --chart-serie:#316AFF;    /* a série medida — hoje a Reserva */
  --chart-limite:#FF8110;   /* linha de referência — hoje o Piso */
  --chart-grid:rgba(90,105,130,.16);  --chart-axis:#8A94AC;

  /* tooltip (S30) — chip escuro; troca em 1 lugar. Família do toast. */
  --tooltip-bg:var(--navy);  --tooltip-fg:#fff;

  /* ================================================================
     2. TIPOGRAFIA — Plus Jakarta Sans (GXON) + escala (base 14px/1.6)
     ================================================================ */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --fs-xs:12px;
  --fs-sm:13px;
  --fs-base:14px;   /* GXON $font-size-base 0.875rem */
  --fs-md:15px;
  --fs-lg:16px;
  --fs-xl:18px;
  --fs-2xl:22px;
  --fs-3xl:28px;

  --lh-tight:1.3;
  --lh-base:1.5;    /* GXON $line-height-base era 1.6; retunado na S48 — ver page.css */
  --lh-loose:1.75;

  --fw-normal:400;
  --fw-medium:500;  /* GXON base */
  --fw-semibold:600;/* GXON headings */
  --fw-bold:700;

  /* ================================================================
     3. RAIO — ritmo da GXON reexpresso (px)
     ================================================================ */
  --r-xs:4px;    /* GXON .25rem */
  --r-sm:6px;    /* GXON .375rem (raio base) */
  --r-md:8px;    /* botões/inputs GXON */
  --r-lg:10px;   /* GXON .625rem (cards) */
  --r-xl:16px;   /* GXON 1rem */
  --r-pill:999px;

  /* ================================================================
     4. ESPAÇAMENTO — escala GXON ($spacer 1rem)
     ================================================================ */
  --sp-0:0;
  --sp-1:4px;    /* .25rem */
  --sp-2:8px;    /* .5rem  */
  --sp-3:16px;   /* 1rem   */
  --sp-4:24px;   /* 1.5rem */
  --sp-5:40px;   /* 2.5rem */
  --sp-6:45px;   /* 2.813rem */
  --sp-7:50px;   /* 3.125rem */

  /* ================================================================
     5. ELEVAÇÃO — sombras sutis frias (recorte vem da borda)
     ================================================================ */
  --shadow-sm:0 1px 2px rgba(20,30,60,.04);
  --shadow:0 5px 10px rgba(20,30,60,.03);
  --shadow-lg:0 8px 24px rgba(20,30,60,.08);
  --shadow-xl:0 24px 64px rgba(20,30,60,.14);

  /* overlay do modal (S33 · Frente C) — navy translucido no claro; troca em 1 lugar */
  --overlay:rgba(30,58,95,.45);
}

[data-theme="dark"]{
  color-scheme:dark; /* S38: idem — popup do select/date/scrollbar no escuro */
  /* ---- ESTRUTURAIS — GXON escuro (S32 · "Grafite neutro") ----
     Neutraliza o viés roxo/azul do #282B44 → grafite-navy #1E2230, mantendo
     a família GXON e o acento. Título levemente suavizado (#F5F7FA) e corpo
     com folga de contraste. Mesmos nomes de token → markup inalterado. */
  /* S38 · Frente F — "soft dark" neutro (GitHub dark dimmed): tira o cast azul
     do #1E2230/#272C3B. So superficies + bordas; acento/status/texto e os tints
     ativos (--*-soft/--active-bg) mantem a identidade. Afinavel 1-2 pontos. */
  --bg:#22272E;
  --surface:#2D333B;
  --chrome:#171B21;   /* S38 · chrome do Shell — escuro: preto mais fundo que o conteudo/cards */
  --surface2:#1C2128;  --surface-2:#1C2128;
  --surface3:#343B45;
  --hover:#1C2128;

  --border:#444C56;  --border2:#565E68;

  --text:#F5F7FA;
  --text2:#9AA3B4;   --muted:#9AA3B4;
  --text3:#6E7686;   --faint:#6E7686;
  --text4:#565E72;

  --blue:#1E3A5F;    --navy:#1E3A5F;
  /* tint ativo/soft (S32): #0A1533 era do fundo azul antigo e ficava "herdado"
     sobre o grafite novo; #2A3350 (grafite-azul) descola suave da superfície.
     Os três andam juntos (nav/tb-ic ativo, chips/cards ativos, info-boxes). */
  --brand:#5B8CFF;   --brand-fill:#316AFF;  --brand-fill-h:#2856E0;  --brand-soft:#2A3350;
  --accent:#5C86FF;  --accent-soft:#2A3350;  --accent-hover:#4A74F0;
  --active-bg:#2A3350;  --active-color:#83A6FF;
  --nav-active:#2D333B;   /* S38 · = surface: item selecionado levanta do chrome escuro */
  --blue2:#67D2FC;

  /* secundária: cor forte mantém; só o tint muda no escuro */
  --secondary-soft:#3A2408;

  /* status: cores fortes herdam do :root; só os tints e o gold-fg flipam */
  --red2:#330D06;--green2:#072319;--orange2:#332506;--yellow2:#332506;--blue2s:#002432;--gold-fg:#E5B85C;--purple2:#2A1D4A;

  /* perspectivas BSC (S45) — vieram do metas.css junto com as claras. */
  --persp-F-bg:#0D2620;--persp-F-bd:#1F4638;--persp-F-pill:#163229;--persp-F-tx:#55D6A0;
  --persp-C-bg:#2E1518;--persp-C-bd:#4E2529;--persp-C-pill:#3A1B1F;--persp-C-tx:#F0969E;
  --persp-P-bg:#14222C;--persp-P-bd:#294050;--persp-P-pill:#1B2E3A;--persp-P-tx:#86B4D4;
  --persp-A-bg:#201A38;--persp-A-bd:#382C5A;--persp-A-pill:#281F47;--persp-A-tx:#B9A9F5;

  /* atingimento e prazo (S45) — vieram do metas.css junto com as perspectivas.
     O --prazo-1 é o único que NÃO flipa: vermelho sólido com texto branco lê
     nos dois temas, e é o degrau que precisa gritar. */
  --atingimento-nao-bg:#2D1515;--atingimento-nao-fg:#F08A80;
  --atingimento-min-bg:#2A2310;--atingimento-min-fg:#E5B85C;
  --atingimento-ati-bg:#0D2420;--atingimento-ati-fg:#4FD1A5;
  --atingimento-sup-bg:#16223A;--atingimento-sup-fg:#7FA8FF;
  --prazo-1-bg:#B42318;--prazo-1-fg:#FFFFFF;--prazo-2-bg:#3A1613;--prazo-2-fg:#F5A79B;--prazo-3-bg:#2E1F0A;--prazo-3-fg:#EDA95C;
  --prazo-4-bg:#2A2409;--prazo-4-fg:#DDBB4E;--prazo-5-bg:#1B2713;--prazo-5-fg:#A9D08C;--prazo-6-bg:#0D2420;--prazo-6-fg:#63C9A3;

  /* notificação — o vermelho mais claro que o dígito branco pede sobre o
     chrome escuro. Era o override [data-theme="dark"] .badge-alertas. */
  --badge:#f2555a;

  /* viz (S42) — só grid/eixo trocam no escuro; as séries herdam do :root. */
  --chart-grid:rgba(170,185,215,.16);  --chart-axis:#9AA3B4;

  /* tooltip (S30) — no escuro, chip mais escuro que o fundo = contraste. */
  --tooltip-bg:#141C2E;  --tooltip-fg:#fff;

  /* ---- ELEVAÇÃO (escuro) ---- */
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 5px 10px rgba(0,0,0,.4);
  --shadow-lg:0 8px 24px rgba(0,0,0,.5);
  --shadow-xl:0 24px 64px rgba(0,0,0,.6);

  /* overlay do modal (S33 · Frente C) — mais denso no escuro */
  --overlay:rgba(0,0,0,.6);

  /* TIPO/RAIO/ESPAÇO herdam do :root (não mudam com o tema). */
}