/* ==========================================================================
   TAX.CO DESIGN SYSTEM — tokens.css  (v2.8.0)
   Fonte única de verdade dos valores de design. Importe ESTE arquivo antes de
   qualquer CSS de componente. Nunca escreva um hex "solto" no produto: use o
   token semântico (--tx-…) e, só quando ele não existir, o token primitivo
   (--tx-neutral-…, --tx-blue-…).

   Camadas
   1) PRIMITIVOS   — a paleta bruta (escalas 50→900), tipografia, escalas de espaço.
   2) SEMÂNTICOS   — o papel de cada valor na interface (bg, surface, text, line…).
                     Só eles mudam entre tema claro e escuro.
   3) COMPONENTES  — ficam em css/taxco.css e consomem só os semânticos.
   ========================================================================== */

/* ---------- Fonte: Hanken Grotesk (variável, 100–900, OFL) ----------
   WOFF2 primeiro (57% menor); o TTF fica como rede de segurança para quem
   copiou a pasta font/ sem os .woff2. Um arquivo por estilo cobre 100–900. */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../font/HankenGrotesk-VariableFont_wght.47b57f0e5cbf.woff2") format("woff2-variations"),
       url("../font/HankenGrotesk-VariableFont_wght.47b57f0e5cbf.woff2") format("woff2"),
       url("../font/HankenGrotesk-VariableFont_wght.f59a29e32635.ttf") format("truetype-variations"),
       url("../font/HankenGrotesk-VariableFont_wght.f59a29e32635.ttf") format("truetype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../font/HankenGrotesk-Italic-VariableFont_wght.7976582f84e5.woff2") format("woff2-variations"),
       url("../font/HankenGrotesk-Italic-VariableFont_wght.7976582f84e5.woff2") format("woff2"),
       url("../font/HankenGrotesk-Italic-VariableFont_wght.d8b0ef6d86ac.ttf") format("truetype-variations"),
       url("../font/HankenGrotesk-Italic-VariableFont_wght.d8b0ef6d86ac.ttf") format("truetype");
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  color-scheme: light;

  /* ======================================================================
     1. PRIMITIVOS
     ====================================================================== */

  /* --- Neutros quentes (a base de TUDO na marca: nunca cinza frio) --- */
  --tx-neutral-0:    #FFFFFF;
  --tx-neutral-50:   #FAFAF8;
  --tx-neutral-100:  #F4F3EF;
  --tx-neutral-150:  #ECEBE5;
  --tx-neutral-200:  #E8E8E3;
  --tx-neutral-300:  #D6D6CF;
  --tx-neutral-400:  #B3B2A7;
  --tx-neutral-500:  #87867C;
  --tx-neutral-600:  #6E6E67;
  --tx-neutral-700:  #56564E;
  --tx-neutral-800:  #454541;
  --tx-neutral-900:  #2C2C2A;
  --tx-neutral-950:  #1C1D1A;
  --tx-neutral-1000: #141413;

  /* --- Azul Tax (marca institucional / documentos / hero de guias) --- */
  --tx-blue-50:  #F1F4F9; --tx-blue-100: #DFE5F1; --tx-blue-200: #BFCBE3; --tx-blue-300: #8DA2CE;
  --tx-blue-400: #5473B5; --tx-blue-500: #1B449C; --tx-blue-600: #16387F; --tx-blue-700: #18336B;
  --tx-blue-800: #172A52; --tx-blue-900: #162139;

  /* --- Ciano (informação, links em contexto azul, acento do infinito) --- */
  --tx-cyan-50:  #F0F8FC; --tx-cyan-100: #DCEEF7; --tx-cyan-200: #BADDEF; --tx-cyan-300: #84C2E3;
  --tx-cyan-400: #46A4D5; --tx-cyan-500: #0885C7; --tx-cyan-600: #046CA3; --tx-cyan-700: #0C5C86;
  --tx-cyan-800: #0E4866; --tx-cyan-900: #113445;

  /* --- Laranja (energia, alerta de atenção, highlight do infinito) --- */
  --tx-orange-50:  #FFF5F3; --tx-orange-100: #FFE9E3; --tx-orange-200: #FFD2C7; --tx-orange-300: #FFB09B;
  --tx-orange-400: #FF8869; --tx-orange-500: #FF6037; --tx-orange-600: #D55231; --tx-orange-700: #AA452A;
  --tx-orange-800: #803724; --tx-orange-900: #56291D;

  /* --- Bronze (o acento "natural" da marca; washes, focus, detalhes) --- */
  --tx-bronze-50:  #F8F6F4; --tx-bronze-100: #EEEBE5; --tx-bronze-200: #DED6CB; --tx-bronze-300: #C4B6A3;
  --tx-bronze-400: #A9824F; --tx-bronze-500: #896E47; --tx-bronze-600: #745E3E; --tx-bronze-700: #5F4E34;
  --tx-bronze-800: #4A3D2B; --tx-bronze-900: #352D22;

  /* --- Dourado (ponte entre azul e laranja no gradiente; hover em fundos escuros) --- */
  --tx-gold-50:  #FCF9F6; --tx-gold-100: #F7F2EA; --tx-gold-200: #F0E4D5; --tx-gold-300: #E4CFB4;
  --tx-gold-400: #D6B78F; --tx-gold-500: #C99F6A; --tx-gold-600: #A8865A; --tx-gold-700: #886D4B;
  --tx-gold-800: #67543B; --tx-gold-900: #473B2B;

  /* --- Verde (sucesso, "endless"; o 500 é vivo demais para texto: use 700+) --- */
  --tx-green-50:  #F3FDF4; --tx-green-100: #E3FAE6; --tx-green-200: #C7F4CE; --tx-green-300: #9AECA8;
  --tx-green-400: #68E27C; --tx-green-500: #36D850; --tx-green-600: #30B545; --tx-green-700: #2A913A;
  --tx-green-800: #246E2F; --tx-green-900: #1E4B24;

  /* --- Vermelho (erro; tom terroso para não brigar com os neutros quentes) --- */
  --tx-red-50:  #FAF4F3; --tx-red-100: #F4E5E4; --tx-red-200: #EACBC9; --tx-red-300: #D9A39E;
  --tx-red-400: #C6756E; --tx-red-500: #B3473E; --tx-red-600: #963E36; --tx-red-700: #7A352F;
  --tx-red-800: #5D2B27; --tx-red-900: #41221F;

  /* --- Ecossistema: cor de assinatura de cada marca do grupo ---
     (é DAQUI que nasce o gradiente iris: cada cor é uma empresa da Tax.Co) --- */
  --tx-brand-taxgroup: #1B449C;     --tx-brand-taxgroup-2: #0885C7;
  --tx-brand-bancofiscal: #896E47;  --tx-brand-bancofiscal-2: #C99F6A;
  --tx-brand-drfiscal: #FF6037;     --tx-brand-drfiscal-2: #733635;
  --tx-brand-nx: #36D850;           --tx-brand-nx-2: #22A83C;
  --tx-brand-sw: #5E5E5E;           --tx-brand-sw-2: #2F3328;

  /* Versão LEGÍVEL de cada cor de marca, para texto, rótulo, ícone e fio fino.
     A cor de assinatura acima é para áreas chapadas; em texto ela reprova no
     contraste (e some de vez no tema escuro). Use sempre o sufixo -text quando a
     cor da marca for a cor de alguma coisa que se lê. */
  --tx-brand-taxgroup-text: var(--tx-blue-500);
  --tx-brand-bancofiscal-text: var(--tx-bronze-600);
  --tx-brand-drfiscal-text: var(--tx-orange-700);
  --tx-brand-nx-text: var(--tx-green-800);
  --tx-brand-sw-text: var(--tx-brand-sw);

  /* --- Vidro (glassmorphism) — planos de profundidade sobre fundo ambiente --- */
  --tx-glass-1: rgba(255, 255, 255, 0.48);   /* card */
  --tx-glass-2: rgba(255, 255, 255, 0.38);   /* shell / sidebar */
  --tx-glass-3: rgba(255, 255, 255, 0.72);   /* elemento flutuante em destaque */
  --tx-glass-well: rgba(255, 255, 255, 0.32);/* poço rebaixado */
  --tx-glass-border: rgba(255, 255, 255, 0.55);
  --tx-glass-blur: 18px;
  --tx-glass-shadow: 0 8px 24px -10px rgba(43, 38, 26, 0.12), 0 2px 6px -3px rgba(43, 38, 26, 0.06);
  --tx-glass-hi: rgba(255, 255, 255, 0.5);            /* fio de luz no topo do vidro */
  --tx-glass-well-shadow: inset 0 1px 3px rgba(43, 38, 26, 0.06);

  /* --- Desfoque (materiais) — a escala de "vidro" da marca ---
     Material = fundo translúcido + blur + saturação + borda de luz. Quanto mais
     alto o elemento flutua, mais ele desfoca o que está atrás. */
  --tx-blur-xs: 6px;    /* chip flutuante sobre imagem */
  --tx-blur-sm: 10px;   /* tooltip, badge sobre mídia */
  --tx-blur-md: 18px;   /* header, sidebar, card de vidro (padrão) */
  --tx-blur-lg: 28px;   /* command palette, sheet */
  --tx-blur-xl: 40px;   /* overlay de tela cheia */
  --tx-saturate: 1.4;   /* acompanha o blur: devolve cor ao que atravessa o vidro */

  /* --- Espessura de traço ---
     A marca usa fio capilar. 1px é o padrão; 0.5px (hairline) só em telas 2x,
     onde ele existe de verdade; 1.5px em controles de seleção; 2px em barras de acento. */
  --tx-border-hair: 0.5px;
  --tx-border: 1px;
  --tx-border-medium: 1.5px;
  --tx-border-thick: 2px;

  /* --- Gradientes ---
     IRIS é o gradiente do infinito: exclusivo para o símbolo, fios de assinatura
     (kicker, régua, barra de progresso) e glows desfocados. Nunca em texto de
     leitura, nunca como fundo de botão, nunca chapado em áreas grandes. */
  --tx-grad-iris: linear-gradient(100deg, #0885C7, #1B449C 30%, #C99F6A 58%, #FF6037 80%, #36D850);
  --tx-grad-iris-h: linear-gradient(90deg, #0885C7, #1B449C 33%, #C99F6A 62%, #FF6037 82%, #36D850);
  /* Linha do ecossistema (as cores das marcas do grupo, como fio de assinatura) */
  --tx-grad-ecosystem: linear-gradient(90deg, #FF6037 -6%, #C99F6A 12%, #896E47 28%, #5E5E5E 45%, #36D850 64%, #0885C7 85%, #1B449C 106%);
  --tx-grad-ink: linear-gradient(180deg, #232420, #141510);           /* botões/pills sólidos */
  --tx-grad-ink-soft: linear-gradient(150deg, #33342E, #17180F);      /* avatares */
  --tx-grad-surface: linear-gradient(180deg, #FFFFFF, #FAF9F6);       /* superfícies "de vidro" */
  --tx-grad-surface-deep: linear-gradient(160deg, #FFFFFF, #F2F1EC);  /* chips de ícone */
  --tx-grad-canvas: linear-gradient(180deg, #F6F5F1, #EEEDE7 60%, #EAE9E2);
  --tx-grad-navy: linear-gradient(160deg, #1B449C, #16387F);          /* hero institucional */
  --tx-grad-skeleton: linear-gradient(90deg, var(--tx-surface-2) 25%, #EBEBE6 50%, var(--tx-surface-2) 75%);
  --tx-grad-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(252, 251, 248, 0.92)); /* cmdk / sheet */
  --tx-grad-media: linear-gradient(160deg, #F6F6F3 0%, #ECECE7 100%);  /* placeholder de midia */

  /* --- Tipografia --- */
  --tx-font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --tx-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  --tx-weight-thin: 200;      /* display editorial */
  --tx-weight-light: 300;     /* lead, itálico de contraste */
  --tx-weight-regular: 400;
  --tx-weight-medium: 500;    /* navegação, labels de valor */
  --tx-weight-semibold: 600;  /* botões, títulos de card, eyebrow */
  --tx-weight-bold: 700;      /* h3/h4, números */
  --tx-weight-black: 800;     /* display de impacto, h1/h2 */

  /* Escala tipográfica. Regra óptica (Apple HIG): quanto maior o tamanho,
     mais negativo o tracking. Os tokens --tx-tracking-* já traduzem isso. */
  --tx-size-display-2xl: clamp(56px, 10vw, 128px); /* capa de seção, número-herói */
  --tx-size-display-xl: clamp(48px, 8.5vw, 104px); /* hero de landing */
  --tx-size-display: clamp(44px, 7vw, 88px);       /* hero padrão */
  --tx-size-h1: clamp(34px, 5vw, 60px);
  --tx-size-h2: clamp(26px, 3vw, 36px);
  --tx-size-h3: 23px;
  --tx-size-h4: 18px;
  --tx-size-lead: clamp(18px, 2.1vw, 23px);
  --tx-size-lg: 17px;
  --tx-size-md: 16px;   /* corpo padrão */
  --tx-size-base: 15px; /* corpo em apps densos, inputs */
  --tx-size-sm: 14px;   /* botões, tabelas, descrições */
  --tx-size-xs: 13px;   /* meta, hints */
  --tx-size-2xs: 12px;  /* notas, legendas */
  --tx-size-micro: 11px;/* eyebrow/kicker (SEMPRE uppercase + tracking) */
  --tx-size-nano: 10px; /* rótulo dentro de chip */

  /* Título de impacto (.display, .h1): caixa e estilo. Na Tax.Co, caixa
     normal e redondo; outra marca do grupo pode pedir caixa alta em itálico. */
  --tx-display-case: none;
  --tx-display-style: normal;

  --tx-leading-tight: 1.02;   /* display */
  --tx-leading-snug: 1.15;    /* títulos */
  --tx-leading-normal: 1.5;   /* corpo */
  --tx-leading-relaxed: 1.65; /* lead / leitura longa */

  --tx-tracking-display-2xl: -0.045em;
  --tx-tracking-display: -0.04em;
  --tx-tracking-h1: -0.035em;
  --tx-tracking-title: -0.025em;
  --tx-tracking-body: -0.011em;
  --tx-tracking-button: 0.01em;
  --tx-tracking-eyebrow: 0.18em;
  --tx-tracking-label: 0.14em;

  /* --- Espaço (base 4px) --- */
  --tx-space-0: 0; --tx-space-1: 4px; --tx-space-2: 8px; --tx-space-3: 12px; --tx-space-4: 16px;
  --tx-space-5: 20px; --tx-space-6: 24px; --tx-space-7: 28px; --tx-space-8: 32px; --tx-space-10: 40px;
  --tx-space-12: 48px; --tx-space-14: 56px; --tx-space-16: 64px; --tx-space-20: 80px; --tx-space-24: 96px;
  --tx-space-32: 128px;

  /* Meio-degraus e os inteiros que faltavam. Nao sao enfeite: sao, medidos,
     os valores que o proprio sistema mais usa. Antes deles a escala tinha 16
     degraus e cobria 168 dos 367 espacamentos de taxco.css; agora cobre 312.
     O nome segue a regra da escala (N x 4px), com -5 para o meio degrau:
     --tx-space-2-5 = 2,5 x 4 = 10px. */
  --tx-space-0-5: 2px;
  --tx-space-1-5: 6px;
  --tx-space-2-5: 10px;
  --tx-space-3-5: 14px;
  --tx-space-4-5: 18px;
  --tx-space-5-5: 22px;
  --tx-space-6-5: 26px;
  --tx-space-7-5: 30px;
  --tx-space-9: 36px;
  --tx-space-11: 44px;
  --tx-space-18: 72px;

  /* --- Raios --- */
  --tx-radius-2xs: 4px;   /* tag minúscula, barra de progresso */
  --tx-radius-xs: 6px;    /* kbd, skeleton line */
  --tx-radius-sm: 8px;    /* links de nav, focus ring, tooltips pequenos */
  --tx-radius-md: 12px;   /* inputs, selects, notices */
  --tx-radius-lg: 16px;   /* cards */
  --tx-radius-xl: 22px;   /* cards grandes, drawers */
  --tx-radius-2xl: 30px;  /* banners, command palette */
  --tx-radius-3xl: 40px;  /* manifestos, rodapé escuro */
  --tx-radius-full: 999px;/* círculo e cápsula de verdade: ponto, switch, avatar, barra */
  /* Forma dos CONTROLES: botão, botão de ícone, chip, tag, badge, tab,
     segmented, pill, busca, navbar. Na Tax.Co é cápsula; outra marca do
     grupo troca aqui sem transformar em quadrado o que é círculo. */
  --tx-radius-control: var(--tx-radius-full);
  /* Fator dos raios PRÓPRIOS de componente (os px do taxco.css: chip de
     ícone, indicador da nav, campo pequeno). 1 na Tax.Co; 0 numa marca de
     canto reto, e o componente acompanha a escala da marca. */
  --tx-radius-k: 1;

  /* --- Ícones: o traço do sprite (Lucide, viewBox 24). O sprite de cada
     edição sai do build com estes valores, e o React lê os tokens. --- */
  --tx-icon-stroke: 1.6;
  --tx-icon-cap: round;
  --tx-icon-join: round;
  /* Canto do chip de ícone. "initial" = o de cada tamanho (15/13/9px vezes
     --tx-radius-k); uma marca de chip redondo põe 50%. */
  --tx-icon-chip-radius: initial;

  /* --- Sombras (sempre quentes: base rgba(43,38,26)) --- */
  --tx-shadow-xs: 0 1px 2px rgba(20, 20, 19, 0.04);
  --tx-shadow-sm: 0 1px 1.5px rgba(43, 38, 26, 0.05), 0 2px 5px rgba(43, 38, 26, 0.04);
  --tx-shadow-md: 0 1px 2px rgba(43, 38, 26, 0.05), 0 6px 16px rgba(43, 38, 26, 0.06), 0 14px 30px rgba(43, 38, 26, 0.06);
  --tx-shadow-lg: 0 2px 6px rgba(43, 38, 26, 0.07), 0 18px 44px rgba(43, 38, 26, 0.11), 0 34px 74px rgba(43, 38, 26, 0.10);
  --tx-shadow-ink: 0 2px 6px rgba(28, 29, 26, 0.18), 0 10px 26px rgba(28, 29, 26, 0.26);
  --tx-shadow-hi: inset 0 1px 0 rgba(255, 255, 255, 0.75); /* highlight interno no topo */
  --tx-shadow-focus: 0 0 0 3px rgba(20, 20, 19, 0.08);

  /* Sombras coloridas — SÓ em elementos que já são daquela cor (botão de marca,
     toast de erro, chip de estado). Nunca para "dar destaque" em algo neutro. */
  --tx-shadow-brand: 0 2px 6px rgba(27, 68, 156, 0.18), 0 10px 26px rgba(27, 68, 156, 0.22);
  --tx-shadow-success: 0 2px 6px rgba(42, 145, 58, 0.16), 0 10px 26px rgba(42, 145, 58, 0.20);
  --tx-shadow-error: 0 2px 6px rgba(179, 71, 62, 0.16), 0 10px 26px rgba(179, 71, 62, 0.20);
  --tx-shadow-accent: 0 2px 6px rgba(169, 130, 79, 0.16), 0 10px 26px rgba(169, 130, 79, 0.20);

  /* --- Escada de elevação (0 → 5) ---
     Cada nível combina superfície + sombra + material. Um componente ocupa UM nível;
     nunca empilhe dois. Ver a seção "Superfícies" da documentação. */
  --tx-elevation-0: none;                                     /* canvas: a página */
  --tx-elevation-1: var(--tx-shadow-sm), var(--tx-shadow-hi);  /* card, input em repouso */
  --tx-elevation-2: var(--tx-shadow-md), var(--tx-shadow-hi);  /* card em destaque, banner */
  --tx-elevation-3: var(--tx-shadow-md);                       /* header/sidebar de vidro */
  --tx-elevation-4: var(--tx-shadow-lg);                       /* modal, drawer, cmdk */
  --tx-elevation-5: var(--tx-shadow-lg), var(--tx-shadow-hi);  /* toast, popover flutuante */

  /* --- Movimento --- */
  --tx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);       /* padrão */
  --tx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* entradas (view, reveal) */
  --tx-ease-brand: cubic-bezier(0.22, 1, 0.36, 1);    /* transições de estado (Dress Code) */
  --tx-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);     /* deslocamento contínuo (glider, carrossel) */
  --tx-ease-in: cubic-bezier(0.42, 0, 1, 1);          /* saídas: o elemento acelera para fora */
  --tx-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);   /* ida e volta (loop de ambiente) */
  --tx-spring: cubic-bezier(0.34, 1.4, 0.5, 1);       /* micro-interações com "vida" */
  --tx-spring-soft: cubic-bezier(0.34, 1.2, 0.64, 1); /* spring discreto: switch, chevron */
  --tx-dur-instant: 60ms; /* resposta ao toque (scale do :active) */
  --tx-dur-fast: 170ms;   /* hover, cor, borda */
  --tx-dur-med: 300ms;    /* transform, sombra, glider */
  --tx-dur-slow: 520ms;   /* entrada de view, painéis */
  --tx-dur-reveal: 700ms; /* reveal on scroll */
  --tx-dur-ambient: 6s;   /* flutuação de ambiente (mascote, glow) */

  /* Atalhos prontos (evitam `transition: all`) */
  --tx-transition-color: color var(--tx-dur-fast) var(--tx-ease), background-color var(--tx-dur-fast) var(--tx-ease), border-color var(--tx-dur-fast) var(--tx-ease);
  --tx-transition-elevate: transform var(--tx-dur-med) var(--tx-spring), box-shadow var(--tx-dur-med) var(--tx-ease);

  /* --- Layout --- */
  --tx-container: 1240px;
  --tx-container-narrow: 720px;
  --tx-container-text: 64ch;
  --tx-gutter: clamp(20px, 4vw, 48px);
  --tx-header-h: 64px;
  --tx-sidebar-w: 276px;
  --tx-control-h: 40px;      /* altura dos controles (botão md, input) */
  --tx-control-h-sm: 32px;
  --tx-control-h-lg: 48px;
  --tx-touch-min: 44px;      /* alvo mínimo de toque */
  --tx-navbar-h: 52px;       /* barra superior de vidro (landing/institucional) */
  --tx-section-y: clamp(64px, 9vw, 140px);   /* respiro vertical entre seções */
  --tx-section-y-sm: clamp(40px, 5vw, 72px); /* respiro entre blocos de uma seção */

  /* --- Camadas (z-index) --- */
  /* ---------- Larguras de corte ----------
     Media query NAO le custom property: `@media (max-width: var(--x))` nao
     funciona em navegador nenhum. Estes tokens existem para (a) ser a lista
     canonica que se copia ao escrever uma media query, (b) alimentar o
     tokens.json e o preset do Tailwind, que sao consumidos por ferramenta.
     Sao os seis cortes que css/taxco.css de fato usa. css/docs.css usa mais
     cinco (520, 560, 620, 760, 1480) que nao entram aqui: aquele arquivo e
     so do site de documentacao e nao vai para produto. */
  --tx-screen-xs: 480px;
  --tx-screen-sm: 640px;
  --tx-screen-md: 720px;
  --tx-screen-lg: 768px;
  --tx-screen-xl: 980px;
  --tx-screen-2xl: 1024px;

  --tx-z-base: 1;
  --tx-z-dropdown: 50;
  --tx-z-sticky: 100;
  --tx-z-drawer: 150;
  --tx-z-modal: 200;
  --tx-z-cmdk: 250;
  --tx-z-toast: 300;
  --tx-z-tooltip: 400;

  /* --- Breakpoints (referência; CSS não lê var em @media) ---
     xs 480 · sm 768 · md 980 · lg 1080 · xl 1280 */

  /* ======================================================================
     2. SEMÂNTICOS — TEMA CLARO (padrão da marca)
     ====================================================================== */

  /* Fundos */
  --tx-bg: var(--tx-neutral-50);          /* canvas de página (apps) */
  --tx-bg-2: var(--tx-neutral-100);       /* canvas editorial (hub) / faixas alternadas */
  --tx-bg-3: var(--tx-neutral-150);
  --tx-surface: var(--tx-neutral-0);      /* card, input, modal */
  --tx-surface-2: #FAF9F6;                /* surface rebaixada: hover de linha, footer de drawer */
  --tx-surface-3: #F2F1EC;                /* chip de ícone, kbd, trilho de segmented */
  --tx-surface-glass: rgba(255, 255, 255, 0.72);
  --tx-surface-glass-2: rgba(255, 255, 255, 0.5);
  --tx-surface-inverse: var(--tx-neutral-950);

  /* Tinta (texto e ícones) */
  --tx-text: var(--tx-neutral-1000);       /* títulos, texto principal — 18.4:1 */
  --tx-text-secondary: var(--tx-neutral-700);      /* corpo secundário — 7.4:1 */
  /* Os números abaixo são o PIOR caso entre as seis superfícies do tema,
     não o contraste contra branco. --tx-text-muted media 5,14 no branco mas
     4,30 sobre --tx-bg-3, abaixo dos 4,5 que o próprio comentário prometia. */
  --tx-text-muted: #61615A;                    /* meta, descrições — 5,22:1 (AA em qualquer tamanho) */
  /* Era var(--tx-neutral-500), 3,07:1 no pior caso, com o comentário
     restringindo-o a ≥18px ou não-texto. Na prática 25 regras o usavam em
     texto de 9 a 13px — .eyebrow, .field__note, .chip__label, .cmdk__group,
     .nav__label e outras. Entre corrigir 25 usos e corrigir o token, o token
     perdeu: agora passa AA em qualquer tamanho e a restrição cai. */
  --tx-text-subtle: #6B6B60;                   /* rótulos, índices, meta fina — 4,51:1 sobre bg-3, o pior caso */
  --tx-text-disabled: var(--tx-neutral-400);
  --tx-text-placeholder: var(--tx-neutral-500);
  --tx-text-inverse: #F4F3EF;
  --tx-text-inverse-2: rgba(233, 232, 225, 0.78);
  --tx-text-inverse-3: rgba(233, 232, 225, 0.55);

  /* Linhas */
  --tx-line: rgba(28, 26, 18, 0.10);
  --tx-line-soft: rgba(28, 26, 18, 0.06);
  --tx-line-hair: rgba(28, 26, 18, 0.04);
  --tx-line-strong: var(--tx-neutral-300);
  /* Borda de CONTROLE: campo, select, checkbox, rádio, switch desligado. O
     WCAG 1.4.11 pede 3:1 para a fronteira que identifica o controle, e
     line-strong dava 1,46:1 — com a superfície do campo a 1,04:1 do
     fundo, a borda era o único contorno, e quase não aparecia. Divisor,
     spinner e borda de botão continuam em line-strong. */
  --tx-line-control: var(--tx-neutral-500);  /* 3,07:1 no pior fundo (bg-3), 3,66:1 sobre surface */
  --tx-line-inverse: rgba(255, 255, 255, 0.14);
  --tx-hi: rgba(255, 255, 255, 0.75);

  /* Poços: fundos sutis de tinta sobre a superfície (botão subtle, chip, hover
     de ícone, empty state). Invertem no escuro para não sumirem. */
  --tx-well: rgba(20, 20, 19, 0.05);
  --tx-well-hover: rgba(20, 20, 19, 0.09);
  --tx-well-soft: rgba(20, 20, 19, 0.04);
  --tx-dot: rgba(20, 20, 19, 0.06);            /* malha de pontos do fundo */
  --tx-ambient-hi: rgba(255, 255, 255, 0.30);  /* esfera clara do fundo ambiente */
  --tx-shimmer: rgba(255, 255, 255, 0.55);     /* varredura de brilho */

  /* Tinta e luz SOBRE a ação primária (que é escura no claro e clara no escuro):
     overlays fixos em branco quebrariam ao inverter o tema. */
  --tx-on-primary-2: rgba(255, 255, 255, 0.55);
  --tx-on-primary-hi: rgba(255, 255, 255, 0.18);
  --tx-on-primary-hi-soft: rgba(255, 255, 255, 0.06);
  --tx-on-primary-line: rgba(255, 255, 255, 0.16);

  /* Código: o bloco de código é escuro nos dois temas */
  --tx-code-bg: #171815;
  --tx-code-text: #E9E8E1;

  /* Tinta sobre preenchimento de estado (botão danger, selo de acento). No
     escuro esses fundos clareiam, então a tinta escurece. */
  --tx-on-error: #FFFFFF;
  --tx-on-accent: #FFFFFF;

  /* Ação primária = TINTA (o botão da marca é preto quente, não azul) */
  --tx-primary: var(--tx-neutral-1000);
  --tx-primary-hover: var(--tx-neutral-900);
  --tx-primary-active: var(--tx-neutral-950);
  --tx-on-primary: #FFFFFF;
  --tx-primary-grad: var(--tx-grad-ink);

  /* Tinta de MARCAÇÃO: o que seleciona, mede ou aponta sem ser texto — o
     ponto do rádio, o trilho do range, o sublinhado da aba, o passo feito,
     o spinner, o anel, a série protagonista do gráfico e a caixa de leitura
     dele. Na Tax.Co é a própria tinta do texto (preto quente); numa marca
     sem preto na paleta, é a cor dela — e o texto continua texto. */
  --tx-indicator: var(--tx-text);
  --tx-on-indicator: var(--tx-on-primary);
  /* Chip de ícone (.icon-chip): fundo, ícone e borda. O desenho do ícone
     é o do sprite; o chip é onde a marca mostra o jeito dela de usá-lo. */
  --tx-icon-chip-bg: var(--tx-grad-surface-deep);
  --tx-icon-chip-fg: var(--tx-text);
  --tx-icon-chip-line: var(--tx-line-soft);

  /* Marca (contextos institucionais: guias, documentos, e-mail, hero navy) */
  --tx-brand: var(--tx-blue-500);
  --tx-brand-hover: var(--tx-blue-600);
  --tx-brand-soft: var(--tx-blue-50);
  --tx-brand-line: var(--tx-blue-200);
  --tx-on-brand: #FFFFFF;

  /* Acento (bronze): washes, spotlight, focus, seleção em listas */
  --tx-accent: var(--tx-bronze-400);
  --tx-accent-text: #8A6A3F;
  --tx-accent-wash: rgba(169, 130, 79, 0.10);
  --tx-accent-line: rgba(169, 130, 79, 0.34);

  /* Link */
  --tx-link: var(--tx-text);
  --tx-link-hover: var(--tx-text-secondary);
  --tx-link-brand: var(--tx-cyan-600);   /* em documentos/contexto azul */

  /* Foco (visível, sempre) */
  --tx-focus-ring: var(--tx-text);
  --tx-focus-ring-accent: var(--tx-accent);
  --tx-focus-offset: 2px;

  /* Estados semânticos: sólido / texto / fundo / linha */
  --tx-success: var(--tx-green-600);   --tx-success-text: var(--tx-green-800);  --tx-success-bg: var(--tx-green-50);  --tx-success-line: var(--tx-green-200);
  --tx-warning: var(--tx-orange-500);  --tx-warning-text: var(--tx-orange-800); --tx-warning-bg: var(--tx-orange-50); --tx-warning-line: var(--tx-orange-200);
  --tx-error: var(--tx-red-500);       --tx-error-text: var(--tx-red-700);      --tx-error-bg: var(--tx-red-50);      --tx-error-line: var(--tx-red-200);
  --tx-error-hover: var(--tx-red-600); /* botão danger sob o ponteiro */
  --tx-info: var(--tx-cyan-500);       --tx-info-text: var(--tx-cyan-800);      --tx-info-bg: var(--tx-cyan-50);      --tx-info-line: var(--tx-cyan-200);
  --tx-neutral-tag-bg: var(--tx-surface-3); --tx-neutral-tag-text: var(--tx-text-secondary);

  /* Fundo ambiente: as manchas do .ambient e o toque frio do canvas
     editorial. São as cores da marca, diluídas — por isso token, e não
     color-mix cravado no componente. */
  --tx-canvas-tint: color-mix(in srgb, var(--tx-cyan-500) 5%, transparent);
  --tx-ambient-1: color-mix(in srgb, var(--tx-blue-500) 17%, transparent);
  --tx-ambient-2: color-mix(in srgb, var(--tx-cyan-500) 16%, transparent);
  --tx-ambient-3: color-mix(in srgb, var(--tx-gold-500) 15%, transparent);
  --tx-ambient-4: color-mix(in srgb, var(--tx-orange-500) 12%, transparent);

  /* Overlay / scrim */
  --tx-scrim: rgba(40, 37, 28, 0.30);
  --tx-scrim-strong: rgba(20, 20, 19, 0.34);

  /* Seleção de texto */
  --tx-selection-bg: var(--tx-text);
  --tx-selection-text: var(--tx-bg);

  /* --- Barra de rolagem ---
     A rolagem também é marca. Fina, quente, em pill, sem trilho visível:
     some no repouso e aparece quando o conteúdo é maior que a caixa. */
  --tx-scrollbar-size: 10px;        /* página e painéis grandes */
  --tx-scrollbar-size-thin: 6px;    /* dentro de drawer, modal, sheet, cmdk */
  --tx-scrollbar-track: transparent;
  --tx-scrollbar-thumb: rgba(28, 26, 18, 0.18);
  --tx-scrollbar-thumb-hover: rgba(28, 26, 18, 0.32);

  /* Dataviz (categorias — ordem fixa) */
  /* Escala categorica padrao: TINTA, do escuro ao claro. Distingue
     categoria sem gastar matiz, e deixa o acento da marca significar
     uma coisa so na tela. Mistura com a superficie (nao com
     transparencia) para a fatia ficar opaca sobre o trilho. */
  --tx-chart-tom-1: color-mix(in srgb, var(--tx-text) 88%, var(--tx-surface));
  --tx-chart-tom-2: color-mix(in srgb, var(--tx-text) 64%, var(--tx-surface));
  --tx-chart-tom-3: color-mix(in srgb, var(--tx-text) 46%, var(--tx-surface));
  --tx-chart-tom-4: color-mix(in srgb, var(--tx-text) 32%, var(--tx-surface));
  --tx-chart-tom-5: color-mix(in srgb, var(--tx-text) 22%, var(--tx-surface));
  --tx-chart-tom-6: color-mix(in srgb, var(--tx-text) 15%, var(--tx-surface));

  /* Cores de marca: so quando a serie FOR uma marca.
     data-tx-chart-paleta="marca" liga. */
  --tx-chart-1: var(--tx-blue-500);
  --tx-chart-2: var(--tx-bronze-400);
  --tx-chart-3: var(--tx-orange-500);
  --tx-chart-4: var(--tx-cyan-500);
  --tx-chart-5: var(--tx-green-700);
  --tx-chart-6: var(--tx-neutral-500);
  --tx-chart-grid: var(--tx-line);
  /* O realce do que responde a pergunta. TINTA, nao cor de marca: num
     desenho todo neutro, tinta cheia contra contexto a 11% separa mais
     que qualquer matiz. data-tx-chart-realce="acento" troca pelo bronze
     quando a tela pedir uma cor. */
  --tx-chart-realce: var(--tx-text);
  --tx-chart-trilho: var(--tx-surface-3);  /* arco de fundo do ponteiro e do radial: quase invisivel */

  /* Forma do grafico. A cor vive em --tx-chart-1..6 e --tx-chart-grid;
     aqui esta o resto do desenho, para um painel inteiro mudar de peso
     sem ninguem abrir o chart.js. O JS le os numericos daqui. */
  --tx-chart-h:            220px;        /* altura padrao: o desenho e o conteudo do bloco */
  --tx-chart-h-sm:         150px;        /* em card de KPI ou coluna estreita */
  --tx-chart-h-lg:         340px;        /* bloco protagonista de um painel */
  --tx-chart-h-spark:      40px;         /* faisca: cabe numa linha de texto */
  --tx-chart-line-w:       2px;         /* linha e curva */
  --tx-chart-line-w-thin:  1.5px;       /* faisca */
  --tx-chart-arc-w:        14px;        /* espessura do anel e do ponteiro */
  --tx-chart-bar-r:        4px;          /* canto do topo da barra: sutil, nao capsula */
  --tx-chart-bar-gap:      0.3;          /* fracao do passo que vira vao: barra presente, vao justo */
  --tx-chart-dot-r:        2.4px;       /* ponto da linha */
  --tx-chart-dot-r-live:   3.5px;       /* ponto do ultimo valor, o que fica sempre visivel */
  --tx-chart-label:        10px;         /* rotulo de categoria e de escala: discreto */
  --tx-chart-value:        38px;         /* numero central do anel: e ele o assunto */
  --tx-chart-unit:         14px;         /* sufixo do numero central */
  --tx-chart-muted-traco:   0.3;          /* o mesmo CONTEXTO, em traco fino: 2px a 11% some */
  --tx-chart-segunda-traco: 0.55;         /* a mesma SECUNDARIA, em traco fino */
  --tx-chart-forte:       0.92;         /* PROTAGONISTA: tinta cheia, a serie de agora */
  --tx-chart-segunda:     0.34;         /* SECUNDARIA: comparavel, mas nao e o assunto */
  --tx-chart-muted:        0.11;         /* CONTEXTO: da a forma, nao disputa */
  --tx-chart-muted-glass:  0.55;        /* o mesmo sobre vidro, onde o apagado e luz */
  --tx-chart-entrada:      820ms;       /* a peca entrando: tempo de UMA peca */
  --tx-chart-passo-entrada: 58ms;       /* atraso entre uma peca e a seguinte */
  --tx-chart-dim:          0.28;        /* o que nao esta sob o ponteiro durante hover */
  --tx-chart-area:         0.26;        /* topo do degrade da area */
}

/* ==========================================================================
   2b. SEMÂNTICOS — TEMA ESCURO
   Ativa por preferência do sistema OU por [data-theme="dark"] no <html>.
   O escuro da Tax.Co também é QUENTE: base #191A17 → #242521 (o mesmo do
   rodapé escuro do Hub). Nunca #000 nem cinza azulado.
   ========================================================================== */
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

:root[data-theme="dark"],
:root:not([data-theme="light"]).tx-auto-dark {
  --tx-bg: #161714;
  --tx-bg-2: #191A17;
  --tx-bg-3: #1E1F1B;
  --tx-surface: #202220;
  --tx-surface-2: #262825;
  --tx-surface-3: #2C2E2A;
  --tx-surface-glass: rgba(32, 34, 32, 0.72); --tx-surface-glass-2: rgba(32, 34, 32, 0.5);
  --tx-surface-inverse: var(--tx-neutral-50);

  --tx-text: #F1F0EA;
  --tx-text-secondary: #C9C8C0;
  --tx-text-muted: #A3A299;
  --tx-chart-muted: 0.16;   /* sobre fundo escuro o apagado some antes */
  --tx-text-subtle: #99988F;                   /* 4,73:1 sobre surface-3 (#2C2E2A), o fundo mais claro em que ele cai */
  --tx-text-disabled: #5C5B55;
  --tx-text-placeholder: #7E7D75;
  --tx-text-inverse: var(--tx-neutral-1000);
  --tx-text-inverse-2: var(--tx-neutral-800);
  --tx-text-inverse-3: var(--tx-neutral-600);

  --tx-line: rgba(255, 255, 255, 0.10);
  --tx-line-soft: rgba(255, 255, 255, 0.06);
  --tx-line-hair: rgba(255, 255, 255, 0.04);
  --tx-line-strong: rgba(255, 255, 255, 0.18);
  --tx-line-control: #7A7970;                  /* 3,13:1 no pior fundo (surface-3), 3,66:1 sobre surface */
  --tx-line-inverse: rgba(28, 26, 18, 0.14);
  --tx-hi: rgba(255, 255, 255, 0.06);

  /* Vidro no escuro: o material fica ESCURO e translúcido. Sem isto, todo
     elemento de vidro (navbar, card de login, sidebar) vira uma placa branca. */
  --tx-glass-1: rgba(38, 40, 37, 0.55);
  --tx-glass-2: rgba(30, 32, 29, 0.46);
  --tx-glass-3: rgba(38, 40, 37, 0.78);
  --tx-glass-well: rgba(15, 16, 14, 0.42);
  --tx-glass-border: rgba(255, 255, 255, 0.12);
  --tx-glass-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6), 0 2px 6px -3px rgba(0, 0, 0, 0.45);
  --tx-glass-hi: rgba(255, 255, 255, 0.06);
  --tx-glass-well-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  --tx-grad-overlay: linear-gradient(180deg, rgba(40, 42, 39, 0.94), rgba(30, 32, 29, 0.94));
  --tx-grad-media: linear-gradient(160deg, #2A2C28 0%, #1E201D 100%);

  --tx-well: rgba(255, 255, 255, 0.07);
  --tx-well-hover: rgba(255, 255, 255, 0.12);
  --tx-well-soft: rgba(255, 255, 255, 0.05);
  --tx-dot: rgba(255, 255, 255, 0.07);
  --tx-ambient-hi: rgba(255, 255, 255, 0.06);
  --tx-shimmer: rgba(255, 255, 255, 0.18);

  --tx-on-primary-2: rgba(20, 20, 19, 0.52);
  --tx-on-primary-hi: rgba(20, 20, 19, 0.10);
  --tx-on-primary-hi-soft: rgba(20, 20, 19, 0.04);
  --tx-on-primary-line: rgba(20, 20, 19, 0.12);

  --tx-primary: #F1F0EA;
  --tx-primary-hover: #FFFFFF;
  --tx-primary-active: #E4E3DC;
  --tx-on-primary: #141413;
  --tx-primary-grad: linear-gradient(180deg, #FFFFFF, #E8E7E0);
  --tx-indicator: var(--tx-text); --tx-on-indicator: var(--tx-on-primary);
  --tx-icon-chip-bg: var(--tx-grad-surface-deep); --tx-icon-chip-fg: var(--tx-text); --tx-icon-chip-line: var(--tx-line-soft);

  --tx-brand: var(--tx-blue-300);
  --tx-brand-hover: var(--tx-blue-200);
  --tx-brand-soft: rgba(27, 68, 156, 0.18);
  --tx-brand-line: rgba(141, 162, 206, 0.35);
  --tx-on-brand: var(--tx-neutral-1000);

  --tx-accent: var(--tx-gold-500);
  --tx-accent-text: var(--tx-gold-300);
  --tx-accent-wash: rgba(201, 159, 106, 0.12);
  --tx-accent-line: rgba(201, 159, 106, 0.38);

  --tx-link: var(--tx-text);
  --tx-link-hover: var(--tx-text-secondary);
  --tx-link-brand: var(--tx-cyan-300);
  --tx-focus-ring: #F1F0EA;

  --tx-success: var(--tx-green-500);  --tx-success-text: var(--tx-green-300);  --tx-success-bg: rgba(54, 216, 80, 0.10);  --tx-success-line: rgba(54, 216, 80, 0.30);
  --tx-warning: var(--tx-orange-400); --tx-warning-text: var(--tx-orange-300); --tx-warning-bg: rgba(255, 96, 55, 0.10);  --tx-warning-line: rgba(255, 96, 55, 0.30);
  --tx-error: var(--tx-red-400);      --tx-error-text: var(--tx-red-300);      --tx-error-bg: rgba(179, 71, 62, 0.14);    --tx-error-line: rgba(179, 71, 62, 0.35);
  --tx-info: var(--tx-cyan-400);      --tx-info-text: var(--tx-cyan-300);      --tx-info-bg: rgba(8, 133, 199, 0.12);     --tx-info-line: rgba(8, 133, 199, 0.32);
  --tx-neutral-tag-bg: var(--tx-surface-3); --tx-neutral-tag-text: var(--tx-text-secondary);

  --tx-scrim: rgba(0, 0, 0, 0.5);
  --tx-scrim-strong: rgba(0, 0, 0, 0.6);
  --tx-selection-bg: var(--tx-text);
  --tx-selection-text: var(--tx-bg);
  --tx-scrollbar-thumb: rgba(255, 255, 255, 0.16);
  --tx-scrollbar-thumb-hover: rgba(255, 255, 255, 0.30);

  --tx-grad-ink-soft: linear-gradient(150deg, #4A4B45, #2A2B27);  /* avatar: precisa clarear no escuro */
  --tx-grad-surface: linear-gradient(180deg, #232522, #1E201D);
  --tx-grad-surface-deep: linear-gradient(160deg, #2A2C29, #1E201D);
  --tx-grad-canvas: linear-gradient(180deg, #1A1B18, #161714 60%, #131411);
  --tx-grad-skeleton: linear-gradient(90deg, var(--tx-surface-2) 25%, #30322E 50%, var(--tx-surface-2) 75%);
  --tx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --tx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
  --tx-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.35);
  --tx-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 28px 64px rgba(0, 0, 0, 0.5);
  --tx-shadow-ink: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(0, 0, 0, 0.45);
  --tx-shadow-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --tx-shadow-focus: 0 0 0 3px rgba(241, 240, 234, 0.14);

  /* Dataviz: a rampa sobe de tom no escuro (azul-500 e verde-700 somem no fundo) */
  --tx-chart-1: var(--tx-blue-300);
  --tx-chart-2: var(--tx-bronze-300);
  --tx-chart-3: var(--tx-orange-400);
  --tx-chart-4: var(--tx-cyan-400);
  --tx-chart-5: var(--tx-green-400);
  --tx-chart-6: var(--tx-neutral-400);

  /* Cor de marca em texto: sobe de tom para se manter legível no fundo escuro */
  --tx-brand-taxgroup-text: var(--tx-blue-300);
  --tx-brand-bancofiscal-text: var(--tx-bronze-300);
  --tx-brand-drfiscal-text: var(--tx-orange-400);
  --tx-brand-nx-text: var(--tx-green-400);
  --tx-brand-sw-text: var(--tx-neutral-400);

  --tx-on-error: var(--tx-neutral-1000);
  --tx-on-accent: var(--tx-neutral-1000);
}

/* Aplica o tema escuro por preferência do sistema quando não há escolha explícita.
   (Duplicado do bloco acima via classe utilitária para navegadores sem :has). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --tx-bg: #161714; --tx-bg-2: #191A17; --tx-bg-3: #1E1F1B;
    --tx-surface: #202220; --tx-surface-2: #262825; --tx-surface-3: #2C2E2A;
    --tx-surface-glass: rgba(32, 34, 32, 0.72); --tx-surface-glass-2: rgba(32, 34, 32, 0.5); --tx-surface-inverse: var(--tx-neutral-50);
    --tx-text: #F1F0EA; --tx-text-secondary: #C9C8C0; --tx-text-muted: #A3A299; --tx-text-subtle: #99988F;
    --tx-text-disabled: #5C5B55; --tx-text-placeholder: #7E7D75;
    --tx-text-inverse: var(--tx-neutral-1000); --tx-text-inverse-2: var(--tx-neutral-800); --tx-text-inverse-3: var(--tx-neutral-600);
    --tx-line: rgba(255, 255, 255, 0.10); --tx-line-soft: rgba(255, 255, 255, 0.06); --tx-line-hair: rgba(255, 255, 255, 0.04);
    --tx-line-strong: rgba(255, 255, 255, 0.18); --tx-line-control: #7A7970; --tx-line-inverse: rgba(28, 26, 18, 0.14); --tx-hi: rgba(255, 255, 255, 0.06);
    --tx-glass-1: rgba(38, 40, 37, 0.55); --tx-glass-2: rgba(30, 32, 29, 0.46); --tx-glass-3: rgba(38, 40, 37, 0.78);
    --tx-glass-well: rgba(15, 16, 14, 0.42); --tx-glass-border: rgba(255, 255, 255, 0.12);
    --tx-glass-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6), 0 2px 6px -3px rgba(0, 0, 0, 0.45);
    --tx-glass-hi: rgba(255, 255, 255, 0.06); --tx-glass-well-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    --tx-grad-overlay: linear-gradient(180deg, rgba(40, 42, 39, 0.94), rgba(30, 32, 29, 0.94));
    --tx-grad-media: linear-gradient(160deg, #2A2C28 0%, #1E201D 100%);
    --tx-well: rgba(255, 255, 255, 0.07); --tx-well-hover: rgba(255, 255, 255, 0.12); --tx-well-soft: rgba(255, 255, 255, 0.05);
    --tx-dot: rgba(255, 255, 255, 0.07); --tx-ambient-hi: rgba(255, 255, 255, 0.06); --tx-shimmer: rgba(255, 255, 255, 0.18);
    --tx-on-primary-2: rgba(20, 20, 19, 0.52); --tx-on-primary-hi: rgba(20, 20, 19, 0.10);
    --tx-on-primary-hi-soft: rgba(20, 20, 19, 0.04); --tx-on-primary-line: rgba(20, 20, 19, 0.12);
    --tx-primary: #F1F0EA; --tx-primary-hover: #FFFFFF; --tx-primary-active: #E4E3DC; --tx-on-primary: #141413;
    --tx-primary-grad: linear-gradient(180deg, #FFFFFF, #E8E7E0);
    --tx-indicator: var(--tx-text); --tx-on-indicator: var(--tx-on-primary);
    --tx-icon-chip-bg: var(--tx-grad-surface-deep); --tx-icon-chip-fg: var(--tx-text); --tx-icon-chip-line: var(--tx-line-soft);
    --tx-brand: var(--tx-blue-300); --tx-brand-hover: var(--tx-blue-200); --tx-brand-soft: rgba(27, 68, 156, 0.18);
    --tx-brand-line: rgba(141, 162, 206, 0.35); --tx-on-brand: var(--tx-neutral-1000);
    --tx-accent: var(--tx-gold-500); --tx-accent-text: var(--tx-gold-300);
    --tx-accent-wash: rgba(201, 159, 106, 0.12); --tx-accent-line: rgba(201, 159, 106, 0.38);
    --tx-link: var(--tx-text); --tx-link-hover: var(--tx-text-secondary); --tx-link-brand: var(--tx-cyan-300); --tx-focus-ring: #F1F0EA;
    --tx-success: var(--tx-green-500);  --tx-success-text: var(--tx-green-300);  --tx-success-bg: rgba(54, 216, 80, 0.10);  --tx-success-line: rgba(54, 216, 80, 0.30);
    --tx-warning: var(--tx-orange-400); --tx-warning-text: var(--tx-orange-300); --tx-warning-bg: rgba(255, 96, 55, 0.10);  --tx-warning-line: rgba(255, 96, 55, 0.30);
    --tx-error: var(--tx-red-400);      --tx-error-text: var(--tx-red-300);      --tx-error-bg: rgba(179, 71, 62, 0.14);    --tx-error-line: rgba(179, 71, 62, 0.35);
    --tx-info: var(--tx-cyan-400);      --tx-info-text: var(--tx-cyan-300);      --tx-info-bg: rgba(8, 133, 199, 0.12);     --tx-info-line: rgba(8, 133, 199, 0.32);
    --tx-scrim: rgba(0, 0, 0, 0.5); --tx-scrim-strong: rgba(0, 0, 0, 0.6);
    --tx-scrollbar-thumb: rgba(255, 255, 255, 0.16); --tx-scrollbar-thumb-hover: rgba(255, 255, 255, 0.30);
    --tx-grad-ink-soft: linear-gradient(150deg, #4A4B45, #2A2B27);  /* avatar: precisa clarear no escuro */
  --tx-grad-surface: linear-gradient(180deg, #232522, #1E201D);
    --tx-grad-surface-deep: linear-gradient(160deg, #2A2C29, #1E201D);
    --tx-grad-canvas: linear-gradient(180deg, #1A1B18, #161714 60%, #131411);
    --tx-grad-skeleton: linear-gradient(90deg, var(--tx-surface-2) 25%, #30322E 50%, var(--tx-surface-2) 75%);
    --tx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --tx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
    --tx-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.35);
    --tx-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 28px 64px rgba(0, 0, 0, 0.5);
    --tx-shadow-ink: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(0, 0, 0, 0.45);
    --tx-shadow-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --tx-shadow-focus: 0 0 0 3px rgba(241, 240, 234, 0.14);
    --tx-chart-muted: 0.16;   /* sobre fundo escuro o contexto some antes */
    --tx-chart-1: var(--tx-blue-300); --tx-chart-2: var(--tx-bronze-300); --tx-chart-3: var(--tx-orange-400);
    --tx-chart-4: var(--tx-cyan-400); --tx-chart-5: var(--tx-green-400); --tx-chart-6: var(--tx-neutral-400);
    --tx-brand-taxgroup-text: var(--tx-blue-300); --tx-brand-bancofiscal-text: var(--tx-bronze-300);
    --tx-brand-drfiscal-text: var(--tx-orange-400); --tx-brand-nx-text: var(--tx-green-400);
    --tx-brand-sw-text: var(--tx-neutral-400);
    --tx-on-error: var(--tx-neutral-1000); --tx-on-accent: var(--tx-neutral-1000);
    --tx-neutral-tag-bg: var(--tx-surface-3); --tx-neutral-tag-text: var(--tx-text-secondary);
    --tx-selection-bg: var(--tx-text); --tx-selection-text: var(--tx-bg);
  }
}

/* ==========================================================================
   3. Modo "tinta invertida" para blocos escuros dentro do tema claro
   (rodapé escuro, hero navy, banner). Aplique .tx-dark no container.
   ========================================================================== */
.tx-dark,
.footer-dark {
  color-scheme: dark;
  --tx-bg: #191A17; --tx-bg-2: #1C1D1A; --tx-bg-3: #20211D; --tx-surface: #242521; --tx-surface-2: #2A2B27; --tx-surface-3: #30312D;
  --tx-surface-glass: rgba(36, 37, 33, 0.72); --tx-surface-glass-2: rgba(36, 37, 33, 0.5); --tx-text: #E9E8E1;
  --tx-text-secondary: rgba(233, 232, 225, 0.78); --tx-text-muted: #A3A299; --tx-text-subtle: #99988F; --tx-line: rgba(255, 255, 255, 0.14);
  --tx-line-soft: rgba(255, 255, 255, 0.08); --tx-line-hair: rgba(255, 255, 255, 0.05); --tx-line-strong: rgba(255, 255, 255, 0.22);
  --tx-line-control: rgba(255, 255, 255, 0.38); --tx-link: #E9E8E1; --tx-link-hover: var(--tx-gold-500); --tx-glass-1: rgba(40, 42, 39, 0.5);
  --tx-glass-2: rgba(32, 34, 31, 0.42); --tx-glass-3: rgba(40, 42, 39, 0.75); --tx-glass-well: rgba(15, 16, 14, 0.4);
  --tx-glass-border: rgba(255, 255, 255, 0.14); --tx-glass-hi: rgba(255, 255, 255, 0.07); --tx-well: rgba(255, 255, 255, 0.08);
  --tx-well-hover: rgba(255, 255, 255, 0.13);
  /* O resto do tema escuro, igual a ele: estado, marca, gráfico, sombra,
     gradiente. Sem isto, um alerta ou um badge dentro do rodapé escuro
     saía com a cor do tema claro. */
  --tx-surface-inverse: var(--tx-neutral-50); --tx-chart-muted: 0.16; --tx-text-disabled: #5C5B55; --tx-text-placeholder: #7E7D75;
  --tx-text-inverse: var(--tx-neutral-1000); --tx-text-inverse-2: var(--tx-neutral-800); --tx-text-inverse-3: var(--tx-neutral-600);
  --tx-line-inverse: rgba(28, 26, 18, 0.14); --tx-hi: rgba(255, 255, 255, 0.06);
  --tx-glass-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.6), 0 2px 6px -3px rgba(0, 0, 0, 0.45);
  --tx-glass-well-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  --tx-grad-overlay: linear-gradient(180deg, rgba(40, 42, 39, 0.94), rgba(30, 32, 29, 0.94));
  --tx-grad-media: linear-gradient(160deg, #2A2C28 0%, #1E201D 100%); --tx-well-soft: rgba(255, 255, 255, 0.05); --tx-dot: rgba(255, 255, 255, 0.07);
  --tx-ambient-hi: rgba(255, 255, 255, 0.06); --tx-shimmer: rgba(255, 255, 255, 0.18); --tx-on-primary-2: rgba(20, 20, 19, 0.52);
  --tx-on-primary-hi: rgba(20, 20, 19, 0.10); --tx-on-primary-hi-soft: rgba(20, 20, 19, 0.04); --tx-on-primary-line: rgba(20, 20, 19, 0.12);
  --tx-primary: #F1F0EA; --tx-primary-hover: #FFFFFF; --tx-primary-active: #E4E3DC; --tx-on-primary: #141413;
  --tx-primary-grad: linear-gradient(180deg, #FFFFFF, #E8E7E0); --tx-brand: var(--tx-blue-300); --tx-brand-hover: var(--tx-blue-200);
  --tx-indicator: var(--tx-text); --tx-on-indicator: var(--tx-on-primary);
  --tx-icon-chip-bg: var(--tx-grad-surface-deep); --tx-icon-chip-fg: var(--tx-text); --tx-icon-chip-line: var(--tx-line-soft);
  --tx-brand-soft: rgba(27, 68, 156, 0.18); --tx-brand-line: rgba(141, 162, 206, 0.35); --tx-on-brand: var(--tx-neutral-1000);
  --tx-accent: var(--tx-gold-500); --tx-accent-text: var(--tx-gold-300); --tx-accent-wash: rgba(201, 159, 106, 0.12);
  --tx-accent-line: rgba(201, 159, 106, 0.38); --tx-link-brand: var(--tx-cyan-300); --tx-focus-ring: #F1F0EA; --tx-success: var(--tx-green-500);
  --tx-success-text: var(--tx-green-300); --tx-success-bg: rgba(54, 216, 80, 0.10); --tx-success-line: rgba(54, 216, 80, 0.30);
  --tx-warning: var(--tx-orange-400); --tx-warning-text: var(--tx-orange-300); --tx-warning-bg: rgba(255, 96, 55, 0.10);
  --tx-warning-line: rgba(255, 96, 55, 0.30); --tx-error: var(--tx-red-400); --tx-error-text: var(--tx-red-300);
  --tx-error-bg: rgba(179, 71, 62, 0.14); --tx-error-line: rgba(179, 71, 62, 0.35); --tx-info: var(--tx-cyan-400);
  --tx-info-text: var(--tx-cyan-300); --tx-info-bg: rgba(8, 133, 199, 0.12); --tx-info-line: rgba(8, 133, 199, 0.32);
  --tx-neutral-tag-bg: var(--tx-surface-3); --tx-neutral-tag-text: var(--tx-text-secondary); --tx-scrim: rgba(0, 0, 0, 0.5);
  --tx-scrim-strong: rgba(0, 0, 0, 0.6); --tx-selection-bg: var(--tx-text); --tx-selection-text: var(--tx-bg);
  --tx-scrollbar-thumb: rgba(255, 255, 255, 0.16); --tx-scrollbar-thumb-hover: rgba(255, 255, 255, 0.30);
  --tx-grad-ink-soft: linear-gradient(150deg, #4A4B45, #2A2B27); --tx-grad-surface: linear-gradient(180deg, #232522, #1E201D);
  --tx-grad-surface-deep: linear-gradient(160deg, #2A2C29, #1E201D); --tx-grad-canvas: linear-gradient(180deg, #1A1B18, #161714 60%, #131411);
  --tx-grad-skeleton: linear-gradient(90deg, var(--tx-surface-2) 25%, #30322E 50%, var(--tx-surface-2) 75%);
  --tx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --tx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.3);
  --tx-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.35);
  --tx-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.45), 0 28px 64px rgba(0, 0, 0, 0.5);
  --tx-shadow-ink: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 26px rgba(0, 0, 0, 0.45); --tx-shadow-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --tx-shadow-focus: 0 0 0 3px rgba(241, 240, 234, 0.14); --tx-chart-1: var(--tx-blue-300); --tx-chart-2: var(--tx-bronze-300);
  --tx-chart-3: var(--tx-orange-400); --tx-chart-4: var(--tx-cyan-400); --tx-chart-5: var(--tx-green-400); --tx-chart-6: var(--tx-neutral-400);
  --tx-brand-taxgroup-text: var(--tx-blue-300); --tx-brand-bancofiscal-text: var(--tx-bronze-300); --tx-brand-drfiscal-text: var(--tx-orange-400);
  --tx-brand-nx-text: var(--tx-green-400); --tx-brand-sw-text: var(--tx-neutral-400); --tx-on-error: var(--tx-neutral-1000);
  --tx-on-accent: var(--tx-neutral-1000);
  /* Derivados: no :root eles já foram resolvidos com o valor CLARO, e é esse
     valor pronto que a ilha herdaria. Declarados aqui, são resolvidos de
     novo com os valores de cima. */
  --tx-elevation-1: var(--tx-shadow-sm), var(--tx-shadow-hi); --tx-elevation-2: var(--tx-shadow-md), var(--tx-shadow-hi);
  --tx-elevation-3: var(--tx-shadow-md); --tx-elevation-4: var(--tx-shadow-lg); --tx-elevation-5: var(--tx-shadow-lg), var(--tx-shadow-hi);
  --tx-focus-ring-accent: var(--tx-accent); --tx-chart-tom-1: color-mix(in srgb, var(--tx-text) 88%, var(--tx-surface));
  --tx-chart-tom-2: color-mix(in srgb, var(--tx-text) 64%, var(--tx-surface));
  --tx-chart-tom-3: color-mix(in srgb, var(--tx-text) 46%, var(--tx-surface));
  --tx-chart-tom-4: color-mix(in srgb, var(--tx-text) 32%, var(--tx-surface));
  --tx-chart-tom-5: color-mix(in srgb, var(--tx-text) 22%, var(--tx-surface));
  --tx-chart-tom-6: color-mix(in srgb, var(--tx-text) 15%, var(--tx-surface)); --tx-chart-grid: var(--tx-line); --tx-chart-realce: var(--tx-text);
  --tx-chart-trilho: var(--tx-surface-3);
  color: var(--tx-text);
}
.tx-navy {
  color-scheme: dark;
  --tx-bg: var(--tx-blue-500); --tx-bg-2: rgba(255, 255, 255, 0.04); --tx-bg-3: rgba(255, 255, 255, 0.07); --tx-surface: var(--tx-blue-600);
  --tx-surface-2: rgba(255, 255, 255, 0.10); --tx-surface-3: rgba(255, 255, 255, 0.14); --tx-surface-glass: rgba(22, 56, 127, 0.72);
  --tx-surface-glass-2: rgba(22, 56, 127, 0.5); --tx-surface-inverse: #FFFFFF; --tx-text: #FFFFFF; --tx-text-secondary: rgba(255, 255, 255, 0.9);
  --tx-text-muted: rgba(255, 255, 255, 0.72); --tx-text-subtle: rgba(255, 255, 255, 0.66); --tx-text-disabled: rgba(255, 255, 255, 0.38);
  --tx-text-placeholder: rgba(255, 255, 255, 0.6); --tx-text-inverse: var(--tx-blue-500); --tx-text-inverse-2: rgba(27, 68, 156, 0.78);
  --tx-text-inverse-3: rgba(27, 68, 156, 0.6); --tx-line: rgba(255, 255, 255, 0.18); --tx-line-soft: rgba(255, 255, 255, 0.1);
  --tx-line-hair: rgba(255, 255, 255, 0.06); --tx-line-strong: rgba(255, 255, 255, 0.3); --tx-line-control: rgba(255, 255, 255, 0.5);
  --tx-line-inverse: rgba(27, 68, 156, 0.16); --tx-hi: rgba(255, 255, 255, 0.08); --tx-glass-1: rgba(255, 255, 255, 0.12);
  --tx-glass-2: rgba(255, 255, 255, 0.08); --tx-glass-3: rgba(255, 255, 255, 0.18); --tx-glass-well: rgba(0, 0, 0, 0.18);
  --tx-glass-border: rgba(255, 255, 255, 0.25); --tx-glass-shadow: 0 8px 24px -10px rgba(4, 16, 48, 0.55), 0 2px 6px -3px rgba(4, 16, 48, 0.4);
  --tx-glass-hi: rgba(255, 255, 255, 0.12); --tx-glass-well-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
  --tx-grad-overlay: linear-gradient(180deg, rgba(27, 68, 156, 0.96), rgba(22, 56, 127, 0.96));
  --tx-grad-media: linear-gradient(160deg, var(--tx-blue-600) 0%, var(--tx-blue-700) 100%); --tx-well: rgba(255, 255, 255, 0.10);
  --tx-well-hover: rgba(255, 255, 255, 0.16); --tx-well-soft: rgba(255, 255, 255, 0.07); --tx-dot: rgba(255, 255, 255, 0.10);
  --tx-ambient-hi: rgba(255, 255, 255, 0.08); --tx-shimmer: rgba(255, 255, 255, 0.35); --tx-on-primary-2: rgba(27, 68, 156, 0.6);
  --tx-on-primary-hi: rgba(27, 68, 156, 0.12); --tx-on-primary-hi-soft: rgba(27, 68, 156, 0.05); --tx-on-primary-line: rgba(27, 68, 156, 0.16);
  --tx-primary: #FFFFFF; --tx-primary-hover: #F1F4F9; --tx-primary-active: #E4E9F2; --tx-on-primary: var(--tx-blue-500);
  --tx-primary-grad: linear-gradient(180deg, #FFFFFF, #EEF2F8); --tx-brand: var(--tx-blue-100); --tx-brand-hover: #FFFFFF;
  --tx-indicator: var(--tx-text); --tx-on-indicator: var(--tx-on-primary);
  --tx-icon-chip-bg: var(--tx-grad-surface-deep); --tx-icon-chip-fg: var(--tx-text); --tx-icon-chip-line: var(--tx-line-soft);
  --tx-brand-soft: rgba(255, 255, 255, 0.12); --tx-brand-line: rgba(255, 255, 255, 0.3); --tx-on-brand: var(--tx-blue-500); --tx-accent: #FFFFFF;
  --tx-accent-text: #FFFFFF; --tx-accent-wash: rgba(255, 255, 255, 0.12); --tx-accent-line: rgba(255, 255, 255, 0.3); --tx-link: #FFFFFF;
  --tx-link-hover: var(--tx-cyan-200); --tx-link-brand: var(--tx-cyan-200); --tx-focus-ring: #FFFFFF; --tx-success: var(--tx-green-400);
  --tx-success-text: var(--tx-green-300); --tx-success-bg: rgba(54, 216, 80, 0.16); --tx-success-line: rgba(54, 216, 80, 0.4);
  --tx-warning: var(--tx-orange-300); --tx-warning-text: var(--tx-orange-300); --tx-warning-bg: rgba(255, 96, 55, 0.16);
  --tx-warning-line: rgba(255, 96, 55, 0.4); --tx-error: var(--tx-red-300); --tx-error-text: var(--tx-red-200);
  --tx-error-bg: rgba(179, 71, 62, 0.24); --tx-error-line: rgba(179, 71, 62, 0.5); --tx-info: var(--tx-cyan-300); --tx-info-text: var(--tx-cyan-200);
  --tx-info-bg: rgba(8, 133, 199, 0.2); --tx-info-line: rgba(8, 133, 199, 0.45); --tx-neutral-tag-bg: rgba(255, 255, 255, 0.14);
  --tx-neutral-tag-text: var(--tx-text-secondary); --tx-scrim: rgba(4, 16, 48, 0.5); --tx-scrim-strong: rgba(4, 16, 48, 0.6);
  --tx-selection-bg: #FFFFFF; --tx-selection-text: var(--tx-blue-500); --tx-scrollbar-thumb: rgba(255, 255, 255, 0.22);
  --tx-scrollbar-thumb-hover: rgba(255, 255, 255, 0.36); --tx-grad-ink-soft: linear-gradient(150deg, var(--tx-blue-400), var(--tx-blue-700));
  --tx-grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.05));
  --tx-grad-surface-deep: linear-gradient(160deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  --tx-grad-canvas: linear-gradient(180deg, var(--tx-blue-500), var(--tx-blue-600));
  --tx-grad-skeleton: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.08) 75%);
  --tx-shadow-xs: 0 1px 2px rgba(4, 16, 48, 0.3); --tx-shadow-sm: 0 1px 2px rgba(4, 16, 48, 0.35), 0 2px 6px rgba(4, 16, 48, 0.3);
  --tx-shadow-md: 0 2px 6px rgba(4, 16, 48, 0.4), 0 12px 28px rgba(4, 16, 48, 0.35);
  --tx-shadow-lg: 0 4px 12px rgba(4, 16, 48, 0.45), 0 28px 64px rgba(4, 16, 48, 0.5);
  --tx-shadow-ink: 0 2px 6px rgba(4, 16, 48, 0.4), 0 10px 26px rgba(4, 16, 48, 0.45); --tx-shadow-hi: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --tx-shadow-focus: 0 0 0 3px rgba(255, 255, 255, 0.2); --tx-chart-muted: 0.2; --tx-chart-1: var(--tx-blue-100); --tx-chart-2: var(--tx-bronze-200);
  --tx-chart-3: var(--tx-orange-300); --tx-chart-4: var(--tx-cyan-200); --tx-chart-5: var(--tx-green-300); --tx-chart-6: var(--tx-neutral-300);
  --tx-brand-taxgroup-text: var(--tx-blue-100); --tx-brand-bancofiscal-text: var(--tx-bronze-200); --tx-brand-drfiscal-text: var(--tx-orange-300);
  --tx-brand-nx-text: var(--tx-green-300); --tx-brand-sw-text: var(--tx-neutral-300); --tx-on-error: var(--tx-neutral-1000);
  --tx-on-accent: var(--tx-blue-500);
  /* Derivados: ver a nota da ilha escura. */
  --tx-elevation-1: var(--tx-shadow-sm), var(--tx-shadow-hi); --tx-elevation-2: var(--tx-shadow-md), var(--tx-shadow-hi);
  --tx-elevation-3: var(--tx-shadow-md); --tx-elevation-4: var(--tx-shadow-lg); --tx-elevation-5: var(--tx-shadow-lg), var(--tx-shadow-hi);
  --tx-focus-ring-accent: var(--tx-accent); --tx-chart-tom-1: color-mix(in srgb, var(--tx-text) 88%, var(--tx-surface));
  --tx-chart-tom-2: color-mix(in srgb, var(--tx-text) 64%, var(--tx-surface));
  --tx-chart-tom-3: color-mix(in srgb, var(--tx-text) 46%, var(--tx-surface));
  --tx-chart-tom-4: color-mix(in srgb, var(--tx-text) 32%, var(--tx-surface));
  --tx-chart-tom-5: color-mix(in srgb, var(--tx-text) 22%, var(--tx-surface));
  --tx-chart-tom-6: color-mix(in srgb, var(--tx-text) 15%, var(--tx-surface)); --tx-chart-grid: var(--tx-line); --tx-chart-realce: var(--tx-text);
  --tx-chart-trilho: var(--tx-surface-3);
  color: var(--tx-text); background: var(--tx-bg);
}