/* JADE · variáveis do design system
   É o tokens.json compilado (versão 2). Se um token mudar no design system, refaça este arquivo a partir do tokens.json.
   No app: tire o bloco :root de css/app.css e carregue este arquivo antes dele (ou cole este conteúdo no lugar do bloco).
   Tema: <html data-theme="claro"> ou <html data-theme="escuro"> (JadeUI.tema()). Sem atributo vale o claro.
   Fonte: o caminho do @font-face supõe as pastas css/ e fonts/ na raiz do app. */

@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* Cores e sombras do tema claro (padrão) */
:root,
[data-theme="claro"] {
  --marca-amarelo: #FFC400;
  --marca-ambar-claro: #FFD84D;
  --marca-ambar-escuro: #C98F00;
  --sobre-amarelo: #0E0E0C;
  --primario: #8A6100;
  --primario-forte: #6E4D00;
  --primario-suave: #FFF3C4;
  --foco: var(--primario);
  --fundo: #F6F4EF;
  --superficie: #FFFFFF;
  --superficie-2: #FAF8F3;
  --neutro-suave: #F0EDE9;
  --superficie-vidro: #FFFFFFD9;
  --veu: #0E0E0C8C;
  --borda: #E4E1D8;
  --borda-forte: #D3CFC3;
  --borda-controle: #8F897D;
  --texto: #0E0E0C;
  --texto-suave: #6E6A61;
  --texto-desabilitado: #A9A498;
  --neutro: #57534E;
  --escuro: #0E0E0C;
  --escuro-2: #1B1A17;
  --escuro-3: #2B2924;
  --escuro-borda: #0E0E0C;
  --texto-inverso: #F6F4EF;
  --lateral-texto: #B5B1A6;
  --lateral-texto-suave: #8A867C;
  --lateral-ativo: #FFC40021;
  --dica-fundo: #0E0E0C;
  --dica-texto: #F6F4EF;
  --toast-fundo: #0E0E0C;
  --verde: #15803D;
  --verde-suave: #DCFCE7;
  --vermelho: #B91C1C;
  --vermelho-suave: #FEE2E2;
  --laranja: #C2410C;
  --laranja-suave: #FFEDD5;
  --azul: #1D4ED8;
  --azul-suave: #DBEAFE;
  --sobre-status: #FFFFFF;
  --vermelho-escuro: #7F1D1D;
  --amarelo: #A16207;
  --amarelo-suave: #FEF9C3;
  --roxo: #7C3AED;
  --roxo-suave: #EDE9FE;
  --grafico-grade: #EEEBE4;
  --grafico-eixo: #D3CFC3;
  --grafico-base: #D6D1C4;
  --etapa-1: #E5A800;
  --etapa-2: #C48A00;
  --etapa-3: #9C6C00;
  --etapa-4: #6E4D00;
  --etapa-5: #4A3300;
  --avatar-nogueira: #7A4E2D;
  --avatar-oliva: #556B2F;
  --avatar-ardosia: #475569;
  --avatar-terracota: #A3452A;
  --avatar-ameixa: #6D3B5E;
  --avatar-petroleo: #1F5F6B;
  --esqueleto: #ECE8E0;
  --esqueleto-brilho: #F8F6F1;
  --sombra: 0 1px 2px #0E0E0C0F;
  --sombra-media: 0 2px 4px #0E0E0C0D, 0 10px 24px -8px #0E0E0C2E;
  --sombra-alta: 0 4px 10px -2px #0E0E0C14, 0 18px 44px -10px #0E0E0C3D;
  --sombra-modal: 0 30px 80px -20px #0E0E0C59, 0 8px 24px -8px #0E0E0C29;
  --anel-foco: 0 0 0 2px #FFFFFF, 0 0 0 4px #8A6100;
  --anel-foco-escuro: 0 0 0 2px #0E0E0C, 0 0 0 4px #FFC400;
  --brilho-amarelo: 0 8px 20px -8px #C98F0080;
}

/* Tema escuro: só o que muda */
[data-theme="escuro"] {
  --primario: #FFC400;
  --primario-forte: #FFD84D;
  --primario-suave: #3A2F0B;
  --foco: var(--primario);
  --fundo: #12110F;
  --superficie: #1B1A17;
  --superficie-2: #211F1C;
  --neutro-suave: #2A2824;
  --superficie-vidro: #1B1A17D9;
  --veu: #000000A6;
  --borda: #2F2D28;
  --borda-forte: #3E3B35;
  --borda-controle: #6F6A60;
  --texto: #F4F1EA;
  --texto-suave: #ABA597;
  --texto-desabilitado: #5E5A52;
  --neutro: #CFCAC0;
  --escuro: #0B0A09;
  --escuro-2: #191815;
  --escuro-3: #282622;
  --escuro-borda: #26241F;
  --lateral-ativo: #FFC4001F;
  --dica-fundo: #F4F1EA;
  --dica-texto: #0E0E0C;
  --toast-fundo: #2B2925;
  --verde: #4ADE80;
  --verde-suave: #10291A;
  --vermelho: #F87171;
  --vermelho-suave: #3B1618;
  --laranja: #FB923C;
  --laranja-suave: #3B2412;
  --azul: #60A5FA;
  --azul-suave: #15284A;
  --sobre-status: #0E0E0C;
  --amarelo: #FACC15;
  --amarelo-suave: #37300C;
  --roxo: #A78BFA;
  --roxo-suave: #2A2147;
  --grafico-grade: #2A2824;
  --grafico-eixo: #3E3B35;
  --grafico-base: #4A463F;
  --etapa-1: #7D5C08;
  --etapa-2: #A57A0C;
  --etapa-3: #D19E10;
  --etapa-4: #FFC933;
  --etapa-5: #FFDF80;
  --esqueleto: #26241F;
  --esqueleto-brilho: #322F2A;
  --sombra: 0 1px 2px #00000052;
  --sombra-media: 0 10px 24px -8px #000000B3;
  --sombra-alta: 0 18px 44px -10px #000000D9, 0 0 0 1px #FFFFFF0F;
  --sombra-modal: 0 30px 80px -20px #000000F2, 0 0 0 1px #FFFFFF14;
  --anel-foco: 0 0 0 2px #1B1A17, 0 0 0 4px #FFC400;
  --brilho-amarelo: 0 8px 22px -8px #FFC40059;
}

/* Espaço, raios, movimento, camadas, medidas e famílias de fonte (iguais nos dois temas) */
:root {
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
  --esp-6: 24px;
  --esp-8: 32px;
  --esp-10: 40px;
  --esp-12: 48px;
  --raio-xs: 6px;
  --raio-s: 8px;
  --raio: 12px;
  --raio-l: 16px;
  --raio-pill: 999px;
  --dur-instante: 80ms;
  --dur-rapida: 140ms;
  --dur-base: 220ms;
  --dur-lenta: 360ms;
  --dur-narrativa: 700ms;
  --curva-padrao: cubic-bezier(0.2, 0, 0, 1);
  --curva-saida: cubic-bezier(0.16, 1, 0.3, 1);
  --curva-entrada: cubic-bezier(0.4, 0, 1, 1);
  --curva-mola: cubic-bezier(0.34, 1.56, 0.64, 1);
  --z-topo: 40;
  --z-menu: 70;
  --z-lateral: 90;
  --z-modal: 100;
  --z-toast: 200;
  --lateral-largura: 248px;
  --lateral-recolhida: 68px;
  --topo-altura: 56px;
  --controle-altura: 36px;
  --controle-altura-p: 30px;
  --controle-altura-g: 44px;
  --pagina-max: 1320px;
  --pagina-margem: 28px;
  --font-sans: Sora, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

/* Estilos de texto */
.tx-saudacao { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.025em; }
.tx-titulo-pagina { font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; }
.tx-titulo-modal { font-family: var(--font-sans); font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; }
.tx-titulo-secao { font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 650; letter-spacing: -0.01em; }
.tx-numero-heroi { font-family: var(--font-sans); font-size: 48px; line-height: 52px; font-weight: 650; letter-spacing: -0.035em; }
.tx-numero-kpi { font-family: var(--font-sans); font-size: 26px; line-height: 32px; font-weight: 650; letter-spacing: -0.025em; }
.tx-numero-tabela { font-family: var(--font-sans); font-size: 13.5px; line-height: 20px; font-weight: 550; }
.tx-corpo { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.tx-corpo-forte { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; }
.tx-corpo-p { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.tx-texto-nav { font-family: var(--font-sans); font-size: 13.5px; line-height: 20px; font-weight: 500; }
.tx-botao { font-family: var(--font-sans); font-size: 13.5px; line-height: 20px; font-weight: 600; }
.tx-rotulo { font-family: var(--font-sans); font-size: 12.5px; line-height: 16px; font-weight: 600; }
.tx-legenda { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; }
.tx-sobrelinha { font-family: var(--font-sans); font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.08em; }
.tx-codigo { font-family: var(--font-mono); font-size: 12.5px; line-height: 18px; font-weight: 500; }