/* ==========================================================================
   tokens.css  |  RCEM Hub, base comum

   O que e: todas as variaveis da identidade RCEM no tema claro e no escuro.
   Define: variaveis em :root (claro) e em [data-theme="dark"] (escuro). Sem o atributo
   data-theme, o escuro vale quando o sistema operacional pede (prefers-color-scheme).
   Consome: nada. Quem consome: base.css, components.css, print.css e o css de cada modulo.
   Grupos (regra: acrescentar, nunca renomear nem remover; todo token novo entra nos tres
   lugares do arquivo, claro, escuro e preferencia do sistema):
     1. marca, superficies, texto, semanticos, acao, menu lateral (base original)
     2. forma e profundidade v2: --radius-card --radius-ctl --radius-pill --r-* --elev-1 a 3
        --edge --edge-hi --glow-lime --grad-* --ctl-* --row-* --top-h --top-h-m
     3. tipografia v2: --fs-num-* --fs-fig --tr-title --tr-num --tr-caps --hx-fs-*
     4. movimento v2: --dur --dur-base --dur-slow --ease --ease-out --ease-spring --hx-d-* --hx-stagger
     5. identidade editorial da home (prefixo --hx-): hero, grao, placar, lajes Gastos e
        Pessoas, ice, rodape, esqueleto, foco sobre escuro, escala tipografica
     6. graficos: paleta categorica --ch-1 a --ch-8, grade, eixo, area, dica
   Regras: nenhuma cor solta fora deste arquivo; toda cor nova ganha variante escura aqui.
   Contraste conferido (AA): texto 4,5:1 ou mais; graficos 3:1 ou mais contra a superficie.
   Paleta categorica --ch-1 a --ch-8: escolhida por distancia de cor sob simulacao de
   protanopia, deuteranopia e tritanopia; os graficos sempre trazem rotulo e legenda,
   nunca dependem so da cor.
   ========================================================================== */

:root{
  color-scheme:light;
  /* marca */
  --teal-deep:#003C3C;--ink:#06201D;--green:#1E9E63;--green-2:#27B574;--green-d:#0E5A3F;
  --lime:#C8F86E;--lime-bright:#D7FF46;--ice:#EBF4F8;
  /* superficies e texto */
  --paper:#F1F4F2;--surface:#FFFFFF;--surface-2:#F7F9F8;--overlay:rgba(6,32,29,.52);
  --text:#0D1B19;--text-2:#3D4F4B;--muted:#5E6F6A;
  --line:#E3E9E6;--line-soft:#EEF2F0;--line-strong:#C9D4D0;--line-hot:#9DB0A9;
  /* semanticos (texto sobre o par -bg com 4,5:1 ou mais) */
  --pos:#0C7650;--pos-bg:#E4F6EE;--warn:#8A5A00;--warn-bg:#FBF0D9;
  --neg:#BE3434;--neg-bg:#FBE9E9;--info:#2459C9;--info-bg:#E8F0FE;--violet:#6B4BC4;--violet-bg:#EFEAFB;
  /* preenchimentos de barra e indicador (cores vivas; o texto usa os tons acima) */
  --pos-fill:#1E9E63;--warn-fill:#C48300;--neg-fill:#D24B4B;--info-fill:#2F6FED;
  /* acao */
  --primary:#003C3C;--on-primary:#C8F86E;--primary-hover:#0A5250;--primary-soft:#E2EFEB;--focus:#1E9E63;
  /* menu lateral */
  --side:#003C3C;--side-2:#0A4A48;--side-text:#BFD6D0;--side-line:rgba(255,255,255,.1);
  --side-grad:linear-gradient(180deg,#00423F 0%,#003C3C 38%,#00302F 100%);--side-hover:rgba(255,255,255,.07);--side-grp:rgba(191,214,208,.76);
  /* forma */
  --radius:18px;--radius-sm:14px;--radius-xs:10px;--dk:0;
  --shadow:0 1px 2px rgba(6,32,29,.05),0 10px 28px -14px rgba(6,32,29,.16);
  --shadow-lg:0 24px 60px -20px rgba(6,32,29,.38);
  --ring:0 0 0 3px rgba(30,158,99,.24);
  /* v2: raios, elevacao, borda e brilho */
  --radius-card:22px;--radius-ctl:14px;--radius-pill:999px;--r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:28px;
  --elev-1:0 1px 2px rgba(6,32,29,.05),0 18px 40px -26px rgba(6,32,29,.28);
  --elev-2:0 2px 4px rgba(6,32,29,.06),0 30px 60px -30px rgba(6,32,29,.38);
  --elev-3:0 4px 10px rgba(6,32,29,.08),0 44px 90px -36px rgba(6,32,29,.55);
  --edge:inset 0 1px 0 rgba(255,255,255,.9);--edge-hi:rgba(255,255,255,.9);
  --glow-lime:0 14px 28px -14px rgba(215,255,70,.75);
  --grad-card:linear-gradient(180deg,#FFFFFF 0%,#FBFCFB 100%);
  --grad-primary:linear-gradient(180deg,#0B5452 0%,#003C3C 100%);
  --grad-lime:linear-gradient(180deg,#E3FF6E 0%,#D7FF46 100%);
  --ctl-sm:36px;--ctl-md:40px;--ctl-lg:46px;--ctl-xl:52px;--ctl-touch:44px;
  --row-h:60px;--row-h-compact:44px;--th-h:44px;
  --row-hover:color-mix(in srgb,var(--primary) 5%,var(--surface));--row-zebra:rgba(6,32,29,.018);
  --btn-hi:inset 0 1px 0 rgba(255,255,255,.16);
  /* espacos */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-7:32px;--sp-8:48px;
  /* tipografia */
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-xs:11px;--fs-sm:12.5px;--fs-md:14px;--fs-lg:16px;--fs-xl:20px;--fs-2xl:26px;--fs-3xl:34px;
  --fs-num-sm:16px;--fs-num-md:20px;--fs-num-lg:26px;--fs-num-xl:34px;--fs-fig:clamp(40px,10.8vw,92px);
  --tr-title:-.035em;--tr-num:-.04em;--tr-caps:.12em;--lh-tight:1.1;
  /* layout */
  --side-w:262px;--top-h:68px;--top-h-m:62px;--nav-h:64px;--content-max:1480px;
  /* camadas */
  --z-top:30;--z-side:40;--z-drawer:70;--z-modal:80;--z-dialog:90;--z-toast:100;
  /* movimento */
  --ease:cubic-bezier(.2,.7,.2,1);--dur:.18s;
  --dur-base:.3s;--dur-slow:.55s;--ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.4,.64,1);
  --hx-d-fast:.18s;--hx-d-base:.3s;--hx-d-slow:.55s;--hx-d-lift:.4s;--hx-d-count:.95s;--hx-d-theme:.45s;--hx-stagger:45ms;
  /* graficos: paleta categorica e linhas de apoio */
  --ch-1:#0B7A6B;--ch-2:#2F62D6;--ch-3:#CC6A00;--ch-4:#A8458F;
  --ch-5:#6F8C12;--ch-6:#C93B52;--ch-7:#5E6F7A;--ch-8:#7F5BE0;
  --ch-grid:#DDE5E1;--ch-axis:#8A9893;--ch-area:.20;--ch-tip-bg:#0D1B19;--ch-tip-fg:#F1F4F2;
  /* home: identidade editorial */
  --hx-wrap:1440px;--hx-gutter:clamp(16px,2.8vw,40px);--hx-gap:clamp(14px,1.5vw,20px);--hx-sec:clamp(48px,6vw,88px);
  --hx-r-hero:40px;--hx-r-slab:36px;--hx-r-card:32px;--hx-r-panel:30px;--hx-r-soon:28px;--hx-r-step:24px;--hx-r-item:20px;
  --hx-hero:radial-gradient(135% 130% at 82% -12%,#22B06F,#0E5A3F 44%,#06302A);
  --hx-hero-glow:radial-gradient(circle,rgba(200,248,110,.5),transparent 62%);
  --hx-grain:radial-gradient(rgba(255,255,255,.95) .8px,transparent 1.1px);
  --hx-hero-sh:0 50px 90px -50px rgba(14,90,63,.7),inset 0 0 0 1px rgba(200,248,110,.10);
  --hx-ivory:#F6F3E8;--hx-on-1:#F6F3E8;--hx-on-2:rgba(246,243,232,.86);--hx-on-3:rgba(246,243,232,.78);
  --hx-score-bg:rgba(3,20,18,.40);--hx-score-ln:rgba(246,243,232,.14);--hx-score-sep:rgba(246,243,232,.20);
  --hx-coral:#FFB4A6;--hx-coral-on:#3A0F0A;--hx-amber:#E7B544;--hx-amber-on:#2B1D00;
  --hx-g-bg:#003C3C;--hx-g-fg:#F6F3E8;--hx-g-fg2:rgba(246,243,232,.78);--hx-g-acc:#C8F86E;--hx-g-ln:rgba(246,243,232,.18);
  --hx-g-sh:0 30px 60px -36px rgba(0,60,60,.7);--hx-g-sh-hover:0 46px 80px -34px rgba(0,60,60,.85),0 0 0 1px rgba(200,248,110,.3);
  --hx-p-bg:#C8F86E;--hx-p-fg:#06201D;--hx-p-fg2:rgba(6,32,29,.78);--hx-p-acc:#06201D;
  --hx-p-ln:rgba(6,32,29,.20);--hx-p-bar:#0A4A33;--hx-p-hl:rgba(255,255,255,.55);
  --hx-p-sh:0 30px 60px -38px rgba(120,170,20,.75);--hx-p-sh-hover:0 46px 80px -34px rgba(120,170,20,.9);
  --hx-ice:#EBF4F8;--hx-ice-ln:transparent;--hx-foot:#003C3C;
  --hx-sk1:#E4EAE7;--hx-sk2:#F3F6F4;--hx-ghost:#D3DDD8;--hx-focus-dk:#C8F86E;--hx-scrim:rgba(3,14,12,.66);
  --hx-fs-fig:clamp(40px,10.8vw,92px);--hx-fs-lead:clamp(26px,3.3vw,46px);--hx-fs-tail:clamp(20px,2.4vw,34px);
  --hx-fs-sec:clamp(30px,3.6vw,48px);--hx-fs-mod:clamp(24px,2.2vw,32px);--hx-fs-big:clamp(44px,5.2vw,68px);
  --hx-fs-score:clamp(32px,3.6vw,50px);--hx-fs-kpi:clamp(26px,2.6vw,36px);--hx-fs-card:clamp(22px,2vw,28px);
}

[data-theme="dark"]{
  color-scheme:dark;
  --paper:#080F0D;--surface:#121A17;--surface-2:#17211D;--overlay:rgba(0,0,0,.66);
  --text:#EAF2EF;--text-2:#B6C7C1;--muted:#8FA39C;
  --line:#22302B;--line-soft:#1A2622;--line-strong:#33453F;--line-hot:rgba(200,248,110,.36);
  --pos:#3FD08F;--pos-bg:#11332A;--warn:#E7B544;--warn-bg:#3A2E10;
  --neg:#F28B8B;--neg-bg:#3A1A1A;--info:#86AAFF;--info-bg:#15264A;--violet:#AE97F7;--violet-bg:#261E45;
  --pos-fill:#3FD08F;--warn-fill:#E7B544;--neg-fill:#F07A7A;--info-fill:#6EA0FF;
  --primary:#C8F86E;--on-primary:#06201D;--primary-hover:#D7FF46;--primary-soft:#1B2B25;--focus:#C8F86E;
  --side:#06201D;--side-2:#0D2F2B;--side-text:#9DB8B1;--side-line:rgba(255,255,255,.08);
  --side-grad:linear-gradient(180deg,#082824 0%,#06201D 40%,#041815 100%);--side-hover:rgba(255,255,255,.06);--side-grp:rgba(157,184,177,.84);
  --dk:1;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);
  --ring:0 0 0 3px rgba(200,248,110,.24);
  --elev-1:0 1px 2px rgba(0,0,0,.5),0 22px 44px -26px rgba(0,0,0,.85);
  --elev-2:0 2px 4px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.9);
  --elev-3:0 4px 12px rgba(0,0,0,.6),0 44px 90px -32px rgba(0,0,0,.95);
  --edge:inset 0 1px 0 rgba(255,255,255,.045);--edge-hi:rgba(200,248,110,.14);
  --glow-lime:0 14px 28px -14px rgba(215,255,70,.55);
  --grad-card:linear-gradient(180deg,#151F1B 0%,#111915 100%);
  --grad-primary:linear-gradient(180deg,#D7FF46 0%,#C8F86E 100%);
  --grad-lime:linear-gradient(180deg,#E3FF6E 0%,#D7FF46 100%);
  --row-zebra:rgba(255,255,255,.022);
  --btn-hi:inset 0 1px 0 rgba(255,255,255,.55);
  --ch-1:#3FC4A8;--ch-2:#6EA0FF;--ch-3:#F0A23A;--ch-4:#D98BC6;
  --ch-5:#B5D45A;--ch-6:#F2766F;--ch-7:#9AA9B3;--ch-8:#C3B1FF;
  --ch-grid:#24332E;--ch-axis:#5C706A;--ch-area:.26;--ch-tip-bg:#EAF2EF;--ch-tip-fg:#06201D;
  --hx-hero-sh:0 50px 90px -50px rgba(34,176,111,.35),inset 0 0 0 1px rgba(200,248,110,.14);
  --hx-g-bg:#0B3A36;--hx-g-ln:rgba(200,248,110,.20);
  --hx-g-sh:0 30px 60px -36px rgba(0,0,0,.85);--hx-g-sh-hover:0 46px 80px -34px rgba(0,0,0,.9),0 0 0 1px rgba(200,248,110,.3);
  --hx-p-bg:linear-gradient(160deg,#1B2C10,#0E190A);--hx-p-fg:#F6F3E8;--hx-p-fg2:rgba(246,243,232,.78);--hx-p-acc:#C8F86E;
  --hx-p-ln:rgba(200,248,110,.24);--hx-p-bar:#C8F86E;--hx-p-hl:rgba(200,248,110,.16);
  --hx-p-sh:0 30px 60px -38px rgba(0,0,0,.85),inset 0 0 0 1px rgba(200,248,110,.2);
  --hx-p-sh-hover:0 46px 80px -34px rgba(0,0,0,.9),inset 0 0 0 1px rgba(200,248,110,.45);
  --hx-ice:#0C1D1B;--hx-ice-ln:var(--line);--hx-foot:#071A18;
  --hx-sk1:#13221E;--hx-sk2:#1B2E29;--hx-ghost:#2B403A;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --paper:#080F0D;--surface:#121A17;--surface-2:#17211D;--overlay:rgba(0,0,0,.66);
    --text:#EAF2EF;--text-2:#B6C7C1;--muted:#8FA39C;
    --line:#22302B;--line-soft:#1A2622;--line-strong:#33453F;--line-hot:rgba(200,248,110,.36);
    --pos:#3FD08F;--pos-bg:#11332A;--warn:#E7B544;--warn-bg:#3A2E10;
    --neg:#F28B8B;--neg-bg:#3A1A1A;--info:#86AAFF;--info-bg:#15264A;--violet:#AE97F7;--violet-bg:#261E45;
    --pos-fill:#3FD08F;--warn-fill:#E7B544;--neg-fill:#F07A7A;--info-fill:#6EA0FF;
    --primary:#C8F86E;--on-primary:#06201D;--primary-hover:#D7FF46;--primary-soft:#1B2B25;--focus:#C8F86E;
    --side:#06201D;--side-2:#0D2F2B;--side-text:#9DB8B1;--side-line:rgba(255,255,255,.08);
    --side-grad:linear-gradient(180deg,#082824 0%,#06201D 40%,#041815 100%);--side-hover:rgba(255,255,255,.06);--side-grp:rgba(157,184,177,.84);
    --dk:1;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.6);
    --shadow-lg:0 24px 60px -20px rgba(0,0,0,.8);
    --ring:0 0 0 3px rgba(200,248,110,.24);
    --elev-1:0 1px 2px rgba(0,0,0,.5),0 22px 44px -26px rgba(0,0,0,.85);
    --elev-2:0 2px 4px rgba(0,0,0,.55),0 30px 60px -30px rgba(0,0,0,.9);
    --elev-3:0 4px 12px rgba(0,0,0,.6),0 44px 90px -32px rgba(0,0,0,.95);
    --edge:inset 0 1px 0 rgba(255,255,255,.045);--edge-hi:rgba(200,248,110,.14);
    --glow-lime:0 14px 28px -14px rgba(215,255,70,.55);
    --grad-card:linear-gradient(180deg,#151F1B 0%,#111915 100%);
    --grad-primary:linear-gradient(180deg,#D7FF46 0%,#C8F86E 100%);
    --grad-lime:linear-gradient(180deg,#E3FF6E 0%,#D7FF46 100%);
    --row-zebra:rgba(255,255,255,.022);
    --btn-hi:inset 0 1px 0 rgba(255,255,255,.55);
    --ch-1:#3FC4A8;--ch-2:#6EA0FF;--ch-3:#F0A23A;--ch-4:#D98BC6;
    --ch-5:#B5D45A;--ch-6:#F2766F;--ch-7:#9AA9B3;--ch-8:#C3B1FF;
    --ch-grid:#24332E;--ch-axis:#5C706A;--ch-area:.26;--ch-tip-bg:#EAF2EF;--ch-tip-fg:#06201D;
    --hx-hero-sh:0 50px 90px -50px rgba(34,176,111,.35),inset 0 0 0 1px rgba(200,248,110,.14);
    --hx-g-bg:#0B3A36;--hx-g-ln:rgba(200,248,110,.20);
    --hx-g-sh:0 30px 60px -36px rgba(0,0,0,.85);--hx-g-sh-hover:0 46px 80px -34px rgba(0,0,0,.9),0 0 0 1px rgba(200,248,110,.3);
    --hx-p-bg:linear-gradient(160deg,#1B2C10,#0E190A);--hx-p-fg:#F6F3E8;--hx-p-fg2:rgba(246,243,232,.78);--hx-p-acc:#C8F86E;
    --hx-p-ln:rgba(200,248,110,.24);--hx-p-bar:#C8F86E;--hx-p-hl:rgba(200,248,110,.16);
    --hx-p-sh:0 30px 60px -38px rgba(0,0,0,.85),inset 0 0 0 1px rgba(200,248,110,.2);
    --hx-p-sh-hover:0 46px 80px -34px rgba(0,0,0,.9),inset 0 0 0 1px rgba(200,248,110,.45);
    --hx-ice:#0C1D1B;--hx-ice-ln:var(--line);--hx-foot:#071A18;
    --hx-sk1:#13221E;--hx-sk2:#1B2E29;--hx-ghost:#2B403A;
  }
}

/* celular: raios editoriais menores (valores da secao 4.2 do DESIGN-HUB) */
@media (max-width:760px){:root{--hx-r-hero:30px;--hx-r-slab:28px;--hx-r-card:26px;--hx-r-panel:24px;--hx-r-soon:24px;--hx-r-step:20px;--hx-r-item:18px}}