/* ═══════════════════════════════════════════════════════════════════
   Cumbuca Design System — design tokens (fonte única de estilo)

   Fonte da verdade: Brand Library no Figma (rebrand 2026). Duas camadas:

   1. PRIMITIVAS — espelham as variáveis/estilos do Figma 1:1
      (--neutral-*, --brand-*, --tint-*, --gradient-*, --glass-*).
      Definidas SÓ em :root; nunca mudam por tema.
   2. SEMÂNTICAS — papel na UI (--bg-surface, --text-body, --input-*...).
      É a única camada que o tema escuro sobrescreve.

   Temas — POR SUBÁRVORE: `data-theme="dark"` (ou `"light"`) funciona no
   <html> E em qualquer wrapper — uma seção dark dentro de página clara
   (padrão do website) ou um bloco claro dentro de página escura:

     <html data-theme="dark">          ← app inteiro escuro
     <section data-theme="dark">…      ← só a seção escura
     <div data-theme="light">…         ← re-clareia dentro do escuro

   Default (sem atributo) = CLARO. O wrapper temado deve pintar o próprio
   fundo (ex.: background: var(--bg-surface)) — o base.css só pinta o <body>.
   Escuro derivado da aplicação real no design do Website ("performance").

   Contexto tipográfico — mesmo mecanismo, eixo ortogonal ao tema:

     <html>                            ← PRODUCT (default): ferramentas
                                         internas — body 14, H1 Matangi 24,
                                         h2 Inter 600 18, h3–h4 Inter 500 16/14; UI em Inter
     <html data-context="marketing">   ← website/landing — body 16,
                                         headings Matangi na escala do Figma

   Os papéis --type-* são os ÚNICOS que o base.css usa para body/h1–h4.
   Componentes (Button, Forms…) não mudam por contexto — são spec da marca.

   Regra de ouro nos apps: NUNCA hardcodar cor/tamanho — se faltar token,
   adicione aqui (PR + bump de versão), não no app.
   ═══════════════════════════════════════════════════════════════════ */

/* ── PRIMITIVAS + estrutura (invariantes de tema) ─────────────────── */
:root {
  /* ── Fonts ─────────────────────────────────────────────────── */
  /* Famílias (primitivas). Headings são sempre Matangi. A fonte de UI/texto
     (--font-body) é definida POR CONTEXTO mais abaixo: ferramentas = Inter,
     website (marketing) = Fustat. Providas pelo app via @fontsource —
     CSP sem hosts externos. Ver README. */
  --font-matangi: 'Matangi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-fustat: 'Fustat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: var(--font-matangi);
  /* Identificador que o usuário confere caractere por caractere: chave PIX,
     CNPJ, código de verificação, hash, chave de API. Em fonte proporcional
     l/1/I e 0/O colam e a conferência falha. Fora da coleção do Figma; nenhuma
     fonte a instalar — `ui-monospace` resolve para SF Mono/Menlo no macOS e
     Cascadia/Consolas no Windows, os nomes seguintes são fallback explícito.
     Sem 'Courier New' de propósito (datada, longe da Inter). */
  --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', Menlo, Consolas, monospace;

  /* ── Type scale — body (line-height 135%) ──────────────────── */
  /* Nomes espelham os text styles Body/* do Figma. */
  --text-xs: 11px;   /* Body XS — tags uppercase, counters, metadados */
  --text-sm: 12px;   /* Body SM — hints, eyebrows/section labels */
  --text-base: 14px; /* Body Base — body default, labels, botão small */
  --text-md: 16px;   /* Body MD — inputs, botão base, body de destaque */
  --text-lg: 18px;   /* Body LG — lead paragraphs */
  --text-xl: 22px;   /* Body XL — standfirst / intro */
  --leading-body: 1.35;
  /* Leitura longa (API docs, markdown, artigos) — aplicados por .ds-prose
     (base.css), nunca no texto de UI. 1.35 é entrelinha de controle e linha
     curta; parágrafo corrido pede 1.6. --measure-prose é a largura máxima da
     COLUNA de conteúdo (texto, tabela, card e código na mesma largura,
     centralizada) — decisão de 2026-10-23, no fine-tuning da API doc. */
  --leading-prose: 1.6;
  --measure-prose: 870px;
  /* Ritmo vertical da prosa (base.css, .ds-prose): texto → texto; bloco que
     não é texto (tabela, código, card, diagrama) ↔ vizinho; antes de h3/h4;
     antes de h2; título → o que vem logo depois. */
  --prose-space-text: 16px;
  --prose-space-block: var(--gap-lg);
  --prose-space-group: 48px;
  --prose-space-section: var(--gap-xl);
  --prose-space-heading: var(--gap-sm);

  /* ── Type scale — headings (Matangi) ───────────────────────── */
  /* Tamanhos e pesos vêm dos text styles Heading/* da Brand Library. Desde
     v3.3.0 cada nível tem SEU peso (o marketing aplica abaixo); o product
     segue em 500 por enquanto. Tracking dos headings é 0, como o Figma; só o
     H4 mantém +2% (--type-h4-tracking). */
  --heading-hero: 36px; /* Hero Title — 800, line-height 1.3 */
  --heading-1: 36px;    /* H1 — 700 */
  --heading-2: 30px;    /* H2 — 600 */
  --heading-3: 24px;    /* H3 — 600 */
  --heading-4: 18px;    /* H4 — 500, único com tracking */
  --leading-heading: 1.4;
  --leading-hero: 1.3;
  --tracking-heading: 0;
  /* --tracking-body/sm/xs (texto corrente) são definidos POR CONTEXTO abaixo.
     Hoje são 0 nos dois contextos (o Figma tem 0); ficam por contexto para
     poder divergir de novo sem mexer nos componentes. */

  /* ── Dado em destaque (stat) — Matangi ExtraBold ───────────── */
  /* Números de métrica ("+10 milhões", "52.000 req/s"): Matangi 800 em 48
     (destaque) e 32, com tracking +2%. Tamanho e tracking são PRÓPRIOS: até a
     v3.2.1 o pequeno herdava --heading-2 e o tracking herdava o dos headings,
     e a escala nova (H2 30, tracking 0) encolheria e desapertaria os números
     sem ninguém pedir. Classes .ds-stat / .ds-stat--lg no base.css. */
  --heading-stat: 48px;
  --heading-stat-sm: 32px;
  --type-stat-tracking: 0.02em;
  --type-stat-font: var(--weight-display) var(--heading-stat-sm) / var(--leading-heading) var(--font-heading);
  --type-stat-lg-font: var(--weight-display) var(--heading-stat) / var(--leading-hero) var(--font-heading);

  /* ── Weights ───────────────────────────────────────────────── */
  --weight-regular: 400;  /* body */
  --weight-medium: 500;   /* h3/h4 e ênfase de UI de produto; H4 do marketing */
  --weight-semibold: 600; /* h2 do product (Inter); Matangi SemiBold — H2/H3 do marketing */
  --weight-bold: 700;     /* h1 do product, rótulo curto (.ds-eyebrow), H1 e ênfase do marketing */
  --weight-display: 800;  /* Matangi ExtraBold — hero do marketing e dado em destaque (.ds-stat) */
  /* Ênfase de texto (strong/b, botões, títulos de item) é UM token por
     contexto: product = 500 (o 600/700 da Inter fica para o h2 e o rótulo
     curto — ênfase pesada no corpo pesaria demais), marketing = 700 (Fustat
     Bold, como o Figma). Nunca escreva
     600/700 literal: use var(--weight-emphasis). */
  --weight-emphasis: var(--weight-medium);

  /* ── Primitivas — neutrals ─────────────────────────────────── */
  --neutral-white: #ffffff;
  --neutral-surface: #fcfcfc;   /* surface — fundo da página (só o body) */
  --neutral-off-white: #fafafa; /* warm surface */
  --neutral-border: #e0e0e0;    /* dividers / borders */
  --neutral-ink: #051015;       /* fundos escuros da marca */

  /* ── Primitivas — brand ────────────────────────────────────── */
  --brand-navy: #20334f;       /* botões / accent */
  --brand-blue: #5970ae;       /* links / interactive */
  --brand-blue-light: #f2f4f7; /* surfaces (blue a 6%) */
  --brand-gold: #ebbf60;       /* ornaments / eyebrows */
  --brand-gold-light: #f8eed8; /* surfaces */
  /* Tinta do logotipo (fill de logos/cumbuca-black.svg e do símbolo). É
     DELIBERADAMENTE mais suave que --text-primary (#151c22) e que
     --neutral-ink (#051015): o logo tem tinta própria — não alinhe o SVG a
     --text-heading nem pinte o logo com cor de texto. Exposto para o
     consumidor não ter de abrir o SVG para descobrir. */
  --logo-ink: #212121;
  /* Acento de dado positivo em superfícies dark (uso no website;
     fora da coleção da brand library — origem: canvas performance). */
  --accent-mint: #4bd3a6;

  /* ── Primitivas — tints ────────────────────────────────────── */
  --tint-lime-wash: #f8fce9;
  --tint-mint-wash: #f3fffb;
  --tint-slate-wash: #eff0f5;

  /* ── Primitivas — texto ────────────────────────────────────── */
  --text-primary: #151c22;
  --text-primary-light: #ffffff;                 /* sobre fundos escuros */
  --text-secondary: #535e6b;
  --text-secondary-light: rgba(255, 255, 255, 0.75); /* sobre fundos escuros */
  --text-tertiary: #838383; /* metadados em ferramentas (fora da coleção do Figma) */
  --text-link: #3e68e4;

  /* ── Primitivas — painéis (Panel / Mint-Gold do Figma) ────── */
  /* Cores dos stops dos painéis da marca — os da hero e do footer do
     website. Os alphas ficam em cada uso (ilustrações do core; PanelStack
     do site). Subiram da camada marketing na v4.3.0 (a ilustração do core
     precisa). */
  --panel-mint: #b2ffe3;
  --panel-slate: #617488;
  --panel-lavender: #a9b6d9;

  /* ── Primitivas — gradientes (paint styles do Figma) ───────── */
  /* ↘ = 135deg, ↗ = 45deg. Alphas vêm dos stops do Figma. */
  --gradient-indigo-lavender: linear-gradient(135deg, rgba(88, 121, 210, 0.17), rgba(253, 228, 255, 0));
  --gradient-green-gold: linear-gradient(135deg, rgba(103, 176, 116, 0.17), rgba(235, 191, 96, 0));
  --gradient-silver-slate: linear-gradient(135deg, rgba(218, 220, 227, 0.19), rgba(97, 116, 136, 0) 82%);
  --gradient-gold-cream: linear-gradient(135deg, rgba(235, 191, 96, 0.23), rgba(253, 228, 255, 0));
  --gradient-mint-gold: linear-gradient(45deg, rgba(178, 255, 227, 0.16), rgba(235, 191, 96, 0.14));
  --gradient-steel-lavender: linear-gradient(135deg, rgba(174, 182, 203, 0.17), rgba(253, 228, 255, 0));
  /* hover do Button (outline / outline-inverted) — ângulo do componente */
  --gradient-mint-gold-hover: linear-gradient(154deg, rgba(178, 255, 227, 0.16), rgba(235, 191, 96, 0.14));
  --gradient-mint-gold-hover-inverted: linear-gradient(154deg, rgba(178, 255, 227, 0.128), rgba(235, 191, 96, 0.113));

  /* ── Primitivas — sombras de card (effect styles Shadow/Card-*) ── */
  /* Luz vinda da esquerda (right) ou da direita (left). Cards brancos
     sobre --bg-surface (surface) PRECISAM de uma delas para se destacar.
     No escuro a sombra 3% é quase invisível — a separação vem de
     --border-default (mesmos valores nos dois temas, por spec). */
  --shadow-card-right: 12px 12px 30px rgba(0, 0, 0, 0.03);
  --shadow-card-left: -12px 12px 30px rgba(0, 0, 0, 0.03);

  /* ── Primitivas — glass ────────────────────────────────────── */
  /* Sombra do glass = --shadow-card-right (o effect style do Figma é o mesmo). */
  --glass-fill: rgba(255, 255, 255, 0.37);
  --glass-stroke: rgba(255, 255, 255, 0.5);
  --glass-blur: 40px;

  /* ── Layout / estrutura ────────────────────────────────────── */
  --content-max-width: 1200px;
  --card-padding: 32px;
  --gap-sm: 12px;
  --gap-md: 24px;
  --gap-lg: 32px;
  --gap-xl: 64px;

  /* ── Documento impresso (A4) ───────────────────────────────── */
  /* Superfície cuja saída é papel/PDF, não tela: fatura, recibo, relatório
     que vai para cliente ou parceiro. A medida de referência é milímetro.
     Tipografia: a MESMA escala Body (11–22) + Matangi para dado em destaque;
     piso 11px vale também aqui. `@page { size: var(--doc-page-size) }`
     verificado no Chrome headless (595×842pt); Firefox/Safari não testados —
     se preocupar, o app escreve `size: A4` literal e usa só os outros dois. */
  --doc-page-size: A4;
  --doc-page-margin: 14mm;
  --doc-content-width: calc(210mm - 2 * var(--doc-page-margin)); /* 182mm */

  /* ── Radius (brand radius = 8px) ───────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 10000px;

  /* ── Motion ────────────────────────────────────────────────── */
  /* Movimento em app é FEEDBACK: curto, uma vez, nunca chamando atenção
     sozinho (loop só em carregamento). Qual usar em quê:
       hover, foco, cor, troca de aba ........ fast  + ease-out
       abrir popover, dropdown, modal ......... base  + ease-out
       fechar qualquer coisa .................. fast  + ease-out
       toast entrando, destaque de estado ..... base  + emphasized
       progresso, barra crescendo, skeleton ... slow  + ease-in-out
     Nada passa de --duration-slow em UI. Anime opacidade, transform, cor e
     sombra; largura só na barra de progresso. Com prefers-reduced-motion, a
     transição some (o estado final aparece direto). O website tem a própria
     coreografia de entrada (marketing/tokens.css, --mkt-motion-*). */
  --duration-instant: 100ms; /* troca imperceptível de estado (pressionar) */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* arranca rápido, assenta devagar — o padrão */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* vai e volta: pulse, progresso */
  --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1); /* entrada com presença: toast */
}

/* Menos movimento: as durações zeram e todo componente que usa os tokens
   perde a transição (o estado final aparece direto). Loops de carregamento
   param no próprio CSS de cada um. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}

/* ── PAPÉIS tipográficos — contexto PRODUCT (default: ferramentas) ──
   Fonte de UI = Inter (texto, inputs, labels, botões, chips, h2–h4), sem
   tracking; H1 reaproveita o text style H3 do Figma (Matangi 24); h2–h4
   são a hierarquia interna na fonte de UI. Pesos (v4.0.0): h1 em 700 e h2
   em 600 (o título da página e o de seção precisam se destacar do corpo),
   h3 e h4 em 500; o rótulo curto (.ds-eyebrow) em 700. O app carrega
   Matangi 700 e Inter 400/500/600/700. Não existe hero em
   ferramenta: .ds-hero = h1. ── */
:root,
[data-context='product'] {
  --font-body: var(--font-inter);
  --tracking-body: 0; /* Inter já é desenhada com respiro para UI em 14px */
  --tracking-sm: 0;
  --tracking-xs: 0;
  --control-font-size: var(--text-base); /* inputs/select/textarea: Body Base 14 */
  --type-body-font: var(--weight-regular) var(--text-base) / var(--leading-body) var(--font-body);
  --type-hero-font: var(--weight-bold) var(--heading-3) / var(--leading-heading) var(--font-heading);
  --type-h1-font: var(--weight-bold) var(--heading-3) / var(--leading-heading) var(--font-heading);
  --type-h2-font: var(--weight-semibold) var(--text-lg) / var(--leading-body) var(--font-body);
  --type-h3-font: var(--weight-medium) var(--text-md) / var(--leading-body) var(--font-body);
  --type-h4-font: var(--weight-medium) var(--text-base) / var(--leading-body) var(--font-body);
  /* Títulos dentro de .ds-prose (leitura longa): mesmos pesos e fonte de
     apps, um degrau acima na escala — com o corpo em 14, o h3 16/500 de UI
     quase não se distingue do texto num documento. h1 não muda. */
  --type-prose-h2-font: var(--weight-semibold) var(--text-xl) / var(--leading-body) var(--font-body);
  --type-prose-h3-font: var(--weight-medium) var(--text-lg) / var(--leading-body) var(--font-body);
  --type-prose-h4-font: var(--weight-medium) var(--text-md) / var(--leading-body) var(--font-body);
  /* +2% literal: o tracking dos headings virou 0 na v3.3.0 seguindo a Brand
     Library, mas o Product/H1 do Figma ainda não foi revisado com o
     backoffice na frente. Fica como estava até essa conferência. */
  --type-hero-tracking: 0.02em;
  --type-h1-tracking: 0.02em;
  /* h2–h4 seguem a fonte de UI do contexto → tracking do texto corrente */
  --type-h2-tracking: var(--tracking-body);
  --type-h3-tracking: var(--tracking-body);
  --type-h4-tracking: var(--tracking-body);
  /* ritmo vertical (margin-bottom; base.css aplica só no eixo inferior) */
  --type-h1-space: var(--gap-md);
  --type-h2-space: var(--gap-md);
  --type-h3-space: var(--gap-sm);
  --type-h4-space: var(--gap-sm);
  --type-body-space: var(--gap-sm); /* <p> */
}

/* ── PAPÉIS tipográficos — contexto MARKETING (website, landing,
   institucional): body Fustat (Body MD 16) com tracking 0 (Figma; o +2% de
   render web foi retirado na v3.2.0), ênfase Fustat Bold 700, escala de
   headings do Figma, texto de apoio em text/secondary. ── */
:root[data-context='marketing'],
[data-context='marketing'] {
  --font-body: var(--font-fustat);
  --tracking-body: 0; /* Body Base (14) e acima — herdado do body */
  --tracking-sm: 0;   /* Body SM (12) */
  --tracking-xs: 0;   /* Body XS (11) */
  --weight-emphasis: var(--weight-bold); /* estilos "Body … Bold" do Figma = Fustat 700 */
  /* Texto de apoio no claro = text/secondary #535e6b (Figma). No escuro o
     [data-theme='dark'] redefine para white 75% na própria subárvore. */
  --text-muted: var(--text-secondary);
  --control-font-size: var(--text-md); /* inputs/select/textarea: Body MD 16 (Figma) */
  --type-body-font: var(--weight-regular) var(--text-md) / var(--leading-body) var(--font-body);
  /* Um peso por nível (Heading/* da Brand Library): Hero ExtraBold, H1 Bold,
     H2 e H3 SemiBold, H4 Medium. Matangi precisa dos arquivos 500/600/700/800
     carregados pela aplicação, senão o browser sintetiza o peso. */
  --type-hero-font: var(--weight-display) var(--heading-hero) / var(--leading-hero) var(--font-heading);
  --type-h1-font: var(--weight-bold) var(--heading-1) / var(--leading-heading) var(--font-heading);
  --type-h2-font: var(--weight-semibold) var(--heading-2) / var(--leading-heading) var(--font-heading);
  --type-h3-font: var(--weight-semibold) var(--heading-3) / var(--leading-heading) var(--font-heading);
  --type-h4-font: var(--weight-medium) var(--heading-4) / var(--leading-heading) var(--font-heading);
  /* A escala de marketing já é de leitura: a prosa usa os mesmos papéis. */
  --type-prose-h2-font: var(--type-h2-font);
  --type-prose-h3-font: var(--type-h3-font);
  --type-prose-h4-font: var(--type-h4-font);
  --type-hero-tracking: var(--tracking-heading);
  --type-h1-tracking: var(--tracking-heading);
  --type-h2-tracking: var(--tracking-heading);
  --type-h3-tracking: var(--tracking-heading);
  --type-h4-tracking: 0.02em; /* único heading que mantém o +2% no Figma */
  /* ritmo vertical: sem definição de design para o website ainda — igual
     ao product; ajustar aqui quando o design definir. */
  --type-h1-space: var(--gap-md);
  --type-h2-space: var(--gap-md);
  --type-h3-space: var(--gap-sm);
  --type-h4-space: var(--gap-sm);
  --type-body-space: var(--gap-sm);
}

/* ── SEMÂNTICAS — tema CLARO (default; `data-theme="light"` re-clareia
      uma subárvore dentro de contexto escuro) ─────────────────────── */
:root,
[data-theme='light'] {
  color-scheme: light;

  /* ── Superfícies ───────────────────────────────────────────── */
  /* REGRA (ferramentas): `surface` (#fcfcfc, cor do Figma) é SÓ o fundo
     do <body> — nenhum outro elemento a recebe. Tudo que assenta sobre a
     página é BRANCO: header, cards, tarefas, menus, dropdowns, painéis,
     modais, inputs e blocos aninhados dentro de card (--bg-card), e cards
     levam --shadow-card-*. --bg-section-alt (off-white) é do website. */
  --bg-surface: var(--neutral-surface);       /* fundo da página (só o body) */
  --bg-header: var(--neutral-white);          /* app header / topbar */
  --bg-card: var(--neutral-white);            /* cards e blocos que ASSENTAM sobre a página (+ shadow) */
  /* Popover = o que FLUTUA SOBRE CONTEÚDO (menu ⋮, dropdown, select custom,
     menu do usuário): precisa ser opaco nos dois temas. No claro coincide com
     --bg-card; no escuro o card é translúcido (2%) e o popover não pode ser. */
  --bg-popover: var(--neutral-white);
  --shadow-popover: var(--shadow-card-right);
  /* Card OPACO: --bg-card já composto sobre --bg-surface. Para o que precisa
     cobrir o conteúdo DENTRO de um card (coluna sticky, cabeçalho fixo de
     tabela) sem dobrar o tom do card translúcido no escuro. */
  --bg-card-solid: var(--neutral-white);
  --bg-section-alt: var(--neutral-off-white); /* seções alternadas (website) */
  --bg-track: var(--tint-slate-wash);         /* trilhas de progresso / segmented */
  --bg-hover: var(--tint-slate-wash);
  --bg-overlay: rgba(5, 16, 21, 0.3);
  /* Vidro que segue o tema (placa das ilustrações; qualquer vidro sobre
     painel/gradiente em app): no claro é o glass do Figma; no escuro, o
     branco 37% viraria uma placa cinza clara sob texto branco. */
  --bg-glass: var(--glass-fill);
  --border-glass: var(--glass-stroke);

  /* ── Texto ─────────────────────────────────────────────────── */
  /* --text-body (= text-primary) e --text-muted são as DUAS únicas cores
     de texto corrente. Parágrafo é --text-body por default (herança);
     clarear SÓ com --text-muted (.ds-text-secondary). Nunca opacity,
     outros cinzas ou --input-placeholder fora de placeholder.
     --text-muted = text/secondary (#535e6b) nos dois contextos desde a
     v4.2.0: ≥ 5.8:1 sobre surface, card e hover (AA). O antigo #838383
     (3.3–3.8:1) virou --text-faint: rótulo de apoio bem apagado, nunca texto
     que precisa ser lido. */
  --text-heading: var(--text-primary);
  --text-body: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-faint: var(--text-tertiary);
  --link: var(--text-link);

  /* ── Bordas / chips ────────────────────────────────────────── */
  --border-default: var(--neutral-border);
  --border-accent: rgba(89, 112, 174, 0.16); /* brand blue @16% */
  --chip-bg: var(--brand-blue-light);
  --chip-border: rgba(89, 112, 174, 0.16);

  /* ── Acento ────────────────────────────────────────────────── */
  /* O que está SELECIONADO, LIGADO ou EM PROGRESSO: aba ativa, Toggle
     ligado, barra de progresso, item de menu atual, checkbox/radio,
     chip brand. Segue o tema (navy no claro, branco no escuro) — nunca use
     --brand-navy para isso: some sobre ink.
     -text = texto/ícone SOBRE o acento; -soft = fundo suave; -on-soft =
     texto sobre o -soft. */
  --accent: var(--brand-navy);
  --accent-text: var(--neutral-white);
  --accent-soft: var(--brand-blue-light);
  --accent-on-soft: var(--brand-navy);

  /* ── Interação ─────────────────────────────────────────────── */
  --focus-ring: var(--brand-blue);
  --selection-bg: var(--brand-gold-light);

  /* ── Forms ─────────────────────────────────────────────────── */
  /* Hexes dos componentes Input/Select/Label do Figma (fora da
     coleção de variáveis — tokenizados aqui). Fundo BRANCO (Figma);
     cinza só em disabled. */
  --input-bg: var(--bg-card);
  --input-bg-disabled: #f7f7fa;
  --input-border: #d1d6db;
  --input-border-hover: var(--brand-navy);
  --input-border-focus: var(--brand-blue);
  /* O cinza mais claro do mesmo matiz com 4.5:1 sobre o input branco
     (4.54:1; o #8c949c do Figma dava 3.07:1). Mais claro que o muted. */
  --input-placeholder: #6f7780;
  --label-text: #141c21;

  /* ── Cores de status (fora do Figma — carry-over) ──────────── */
  /* Sólida = texto/ícone: ≥ 4.5:1 sobre o próprio -soft composto em surface,
     card e hover, nos dois temas (v4.2.0). -soft = fundo de chip/banner; -soft-hover = hover
     de uma superfície -soft (2× o alpha); -border = contorno; -fill =
     superfície sólida (toast, badge forte) com texto --text-on-fill.
     Matriz completa para os 5 tons. Neutro: fundo = --chip-bg, hover =
     --bg-hover, contorno = --chip-border, sólido = --color-neutral-fill. */
  --color-positive: #057334;
  --color-positive-soft: rgba(34, 197, 94, 0.12);
  --color-positive-soft-hover: rgba(34, 197, 94, 0.24);
  --color-positive-border: rgba(34, 197, 94, 0.3);
  --color-attention: #a84c01;
  --color-attention-soft: rgba(234, 179, 8, 0.1);
  --color-attention-soft-hover: rgba(234, 179, 8, 0.2);
  --color-attention-border: rgba(180, 83, 9, 0.35);
  --color-danger: #c31518;
  --color-danger-soft: rgba(239, 68, 68, 0.1);
  --color-danger-soft-hover: rgba(239, 68, 68, 0.2);
  --color-danger-border: rgba(239, 68, 68, 0.25);
  --color-info: #1754db;
  --color-info-soft: rgba(37, 99, 235, 0.12);
  --color-info-soft-hover: rgba(37, 99, 235, 0.24);
  --color-info-border: rgba(37, 99, 235, 0.3);
  /* progress = "em andamento" (negociação, assinatura) — roxo herdado do v2 */
  --color-progress: #5351c7;
  --color-progress-soft: rgba(125, 124, 217, 0.15);
  --color-progress-soft-hover: rgba(125, 124, 217, 0.3);
  --color-progress-border: rgba(125, 124, 217, 0.3);
  /* -fill: valores fixos p/ AA ≥ 4.5:1 com texto branco (iguais nos 2 temas) */
  --color-positive-fill: #15803d;
  --color-attention-fill: #b45309;
  --color-danger-fill: #c81e1e;
  --color-info-fill: #2563eb;
  --color-progress-fill: #5b5ad1;
  /* neutral-fill: o peso visual de um -fill sem tom de status (P2, "skip"
     ao lado de danger/attention sólidos). É o que o Chip solid neutral usa. */
  --color-neutral-fill: var(--brand-navy);
  --text-on-fill: #ffffff;

  /* ── Dados (data-viz) ──────────────────────────────────────── */
  /* Cor que CODIFICA DADO, não estado — nunca use status (--color-*) como
     série nem categórica como status. Paleta derivada da marca e da
     linguagem de gráfico do website (barras indigo→navy e gold→mint do
     relatório). Validada nos dois temas (skill dataviz): vizinhas com
     ΔE OKLab ≥ 8.5 em protanopia/deuteranopia e ≥ 16 em visão normal,
     todas ≥ 3:1 sobre a superfície; as 3 primeiras (indigo, gold, mint)
     também em todos os pares (dispersão, mapa).
     · CATEGÓRICA --categorical-1…12: identidade, em ORDEM CANÔNICA fixa —
       categoria i usa sempre a cor i. 1…6 são os matizes da marca; 7…12
       são variações de luminosidade dos mesmos matizes (mais escuras no
       claro, mais claras no escuro), validadas em sequência com as 6 e
       contra a base do mesmo matiz. Prefira 1…6; 7…12 quando a dimensão é
       de identidade (famílias, modelos). Acima de 12 a cor não identifica:
       chip, aba e legenda SEMPRE com o nome; no gráfico, agrupe em "Outros"
       (--data-other) ou use small multiples.
       -light = ponta clara do gradiente da série (mesmo matiz);
       -gradient = barra/fatia pronta (clara no topo → cor da série na base);
       -soft = fundo de chip/linha de tabela da categoria.
     · DESTAQUE --data-highlight-*: "nós" contra o resto (gold → mint, a
       barra da Cumbuca no relatório do site). Use em UMA série por gráfico.
     · SEQUENCIAL --sequential-1…5: quanto (indigo → navy; serve a funil).
       No escuro a âncora inverte (1 = mais perto do fundo).
     · DIVERGENTE --diverging-1…5: de que lado de uma referência — 1/2 abaixo
       (indigo), 3 neutro, 4/5 acima (gold). Nunca verde/vermelho.
     Área sob linha: stop-color da série com opacidade 0.32 → 0. Texto de
     gráfico usa --text-*, nunca a cor da série. */
  --categorical-1: #4f6dbd; /* indigo */
  --categorical-2: #b7852a; /* gold */
  --categorical-3: #269573; /* mint */
  --categorical-4: #325392; /* navy */
  --categorical-5: #528747; /* green */
  --categorical-6: #884f91; /* orchid */
  --categorical-1-light: #7798ec;
  --categorical-2-light: #e5b15b;
  --categorical-3-light: #5bc19d;
  --categorical-4-light: #597cbf;
  --categorical-5-light: #7cb270;
  --categorical-6-light: #b478be;
  --categorical-1-soft: rgba(79, 109, 189, 0.12);
  --categorical-2-soft: rgba(183, 133, 42, 0.12);
  --categorical-3-soft: rgba(38, 149, 115, 0.12);
  --categorical-4-soft: rgba(50, 83, 146, 0.12);
  --categorical-5-soft: rgba(82, 135, 71, 0.12);
  --categorical-6-soft: rgba(136, 79, 145, 0.12);
  --categorical-1-gradient: linear-gradient(180deg, var(--categorical-1-light), var(--categorical-1));
  --categorical-2-gradient: linear-gradient(180deg, var(--categorical-2-light), var(--categorical-2));
  --categorical-3-gradient: linear-gradient(180deg, var(--categorical-3-light), var(--categorical-3));
  --categorical-4-gradient: linear-gradient(180deg, var(--categorical-4-light), var(--categorical-4));
  --categorical-5-gradient: linear-gradient(180deg, var(--categorical-5-light), var(--categorical-5));
  --categorical-6-gradient: linear-gradient(180deg, var(--categorical-6-light), var(--categorical-6));
  --categorical-7: #1f3580; /* indigo escuro */
  --categorical-8: #5f3900; /* gold escuro */
  --categorical-9: #678ccf; /* navy claro */
  --categorical-10: #005e42; /* mint escuro */
  --categorical-11: #592161; /* orchid escuro */
  --categorical-12: #215515; /* green escuro */
  --categorical-7-light: #425ead;
  --categorical-8-light: #896030;
  --categorical-9-light: #91b8fe;
  --categorical-10-light: #3b8769;
  --categorical-11-light: #83498b;
  --categorical-12-light: #497e3e;
  --categorical-7-soft: rgba(31, 53, 128, 0.12);
  --categorical-8-soft: rgba(95, 57, 0, 0.12);
  --categorical-9-soft: rgba(103, 140, 207, 0.12);
  --categorical-10-soft: rgba(0, 94, 66, 0.12);
  --categorical-11-soft: rgba(89, 33, 97, 0.12);
  --categorical-12-soft: rgba(33, 85, 21, 0.12);
  --categorical-7-gradient: linear-gradient(180deg, var(--categorical-7-light), var(--categorical-7));
  --categorical-8-gradient: linear-gradient(180deg, var(--categorical-8-light), var(--categorical-8));
  --categorical-9-gradient: linear-gradient(180deg, var(--categorical-9-light), var(--categorical-9));
  --categorical-10-gradient: linear-gradient(180deg, var(--categorical-10-light), var(--categorical-10));
  --categorical-11-gradient: linear-gradient(180deg, var(--categorical-11-light), var(--categorical-11));
  --categorical-12-gradient: linear-gradient(180deg, var(--categorical-12-light), var(--categorical-12));
  /* texto SOBRE o dado (rótulo dentro da barra/fatia): o que tiver mais
     contraste com o preenchimento e a ponta clara. Abaixo de 4.5:1 → rótulo fora. */
  --text-on-categorical-1: var(--neutral-ink);
  --text-on-categorical-2: var(--neutral-ink);
  --text-on-categorical-3: var(--neutral-ink);
  --text-on-categorical-4: var(--neutral-white);
  --text-on-categorical-5: var(--neutral-ink);
  --text-on-categorical-6: var(--neutral-white);
  --text-on-categorical-7: var(--neutral-white);
  --text-on-categorical-8: var(--neutral-white);
  --text-on-categorical-9: var(--neutral-ink);
  --text-on-categorical-10: var(--neutral-white);
  --text-on-categorical-11: var(--neutral-white);
  --text-on-categorical-12: var(--neutral-white);
  --data-highlight-from: #e5b15b;
  --data-highlight-to: #5bc19d;
  --data-highlight-gradient: linear-gradient(90deg, var(--data-highlight-from), var(--data-highlight-to));
  --data-other: #798898;
  --sequential-1: #8caffe;
  --sequential-2: #6e90dc;
  --sequential-3: #5171bb;
  --sequential-4: #36549a;
  --sequential-5: #1d377b;
  --diverging-1: #3c5aa1;
  --diverging-2: #89a4de;
  --diverging-3: #dadee3;
  --diverging-4: #d1a255;
  --diverging-5: #a56d0f;
  --text-on-sequential-1: var(--neutral-ink);
  --text-on-sequential-2: var(--neutral-ink);
  --text-on-sequential-3: var(--neutral-white);
  --text-on-sequential-4: var(--neutral-white);
  --text-on-sequential-5: var(--neutral-white);
  --text-on-highlight: var(--neutral-ink);
  --data-band: #ebf0fd; /* faixa de fundo: bullet, banda de referência, mín–máx */
  /* JULGAMENTO (--judgment-1…5): quando o dado SIGNIFICA bom ou ruim
     (veredito de preço, saúde, SLA) — a única escala de dados com cor de
     status, e a MESMA em badge e gráfico. 1 excelente · 2 bom · 3 na média ·
     4 atenção · 5 ruim. Opaca, validada como a categórica (ΔE vizinhos,
     ≥ 3:1). Sempre com rótulo: a cor não carrega o veredito sozinha. */
  --judgment-1: #00511c;
  --judgment-2: #5a9e65;
  --judgment-3: #5c646f;
  --judgment-4: #b97500;
  --judgment-5: #9e000d;
  --text-on-judgment-1: var(--neutral-white);
  --text-on-judgment-2: var(--neutral-ink);
  --text-on-judgment-3: var(--neutral-white);
  --text-on-judgment-4: var(--neutral-ink);
  --text-on-judgment-5: var(--neutral-white);

  /* ── Button (segue o tema) ─────────────────────────────────── */
  /* fill = ação primária; outline = secundária. No claro: o desenho do
     Figma (ink sólido / branco com contorno ink). No escuro (abaixo) a
     hierarquia se mantém: fill vira branco sólido com texto ink e outline
     vira o desenho do outline-inverted. outline-inverted (button.css) segue
     fixo — é para foto/painel escuro DENTRO do tema claro. */
  --button-fill-bg: var(--neutral-ink);
  --button-fill-bg-hover: var(--brand-navy);
  --button-fill-text: var(--neutral-white);
  --button-outline-bg: var(--neutral-white);
  /* gradiente em alpha baixo POR CIMA do branco (como no Figma) */
  --button-outline-bg-hover: var(--gradient-mint-gold-hover), var(--neutral-white);
  --button-outline-border: var(--neutral-ink);
  --button-outline-text: var(--text-primary);

  /* ── Tooltip (superfície invertida) ────────────────────────── */
  /* Balão escuro sobre UI clara — ver tooltip.css / tooltip.tsx. */
  --bg-tooltip: var(--neutral-ink);
  --text-tooltip: var(--neutral-white);
  --border-tooltip: transparent;
}

/* ── SEMÂNTICAS — tema ESCURO ────────────────────────────────────
   Derivado da aplicação real no design do Website (Figma, canvas
   "performance"): página ink, cards translúcidos brancos a 2%,
   bordas white @8% / blue @16%, texto branco/75%, forms nos variants
   dark da brand library. Só as SEMÂNTICAS mudam aqui. */
:root[data-theme='dark'],
[data-theme='dark'] {
  color-scheme: dark;

  --bg-surface: var(--neutral-ink);       /* #051015 */
  --bg-header: var(--neutral-ink);     /* website: ink (@95% quando sobre conteúdo) */
  --bg-card: rgba(255, 255, 255, 0.02);
  /* opaco, um degrau acima do ink (= --bg-section-alt); sombra com peso
     real, porque a de 3% some sobre ink */
  /* INVARIANTE: --bg-card-solid = --bg-card (branco 2%) composto sobre
     --bg-surface (#051015): 5+0.02·250, 16+0.02·239, 21+0.02·234 = #0a151a.
     Mudou um dos dois? Recalcule este. */
  --bg-card-solid: #0a151a;
  --bg-popover: var(--bg-card-solid);
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.5);
  --bg-section-alt: #0a151a;
  --bg-track: rgba(255, 255, 255, 0.03);
  --bg-hover: rgba(255, 255, 255, 0.05);
  --bg-overlay: rgba(0, 0, 0, 0.4);
  /* vidro escuro = ink translúcido: o desfoque do painel aparece, mas
     escurecido, e o texto branco por cima mantém contraste */
  --bg-glass: rgba(5, 16, 21, 0.55);
  --border-glass: rgba(255, 255, 255, 0.14);

  --text-heading: var(--text-primary-light);
  --text-body: var(--text-primary-light);
  --text-muted: var(--text-secondary-light);
  --text-faint: rgba(255, 255, 255, 0.5); /* rótulos de stat card e de seção no dark (Figma) */
  /* Sem referência no design (o site não mostra links em corpo dark):
     brand blue clareado p/ AA sobre ink — ajustar quando o design definir. */
  --link: #8ba4ea;

  --border-default: rgba(255, 255, 255, 0.08);
  --border-accent: rgba(89, 112, 174, 0.16);
  --chip-bg: rgba(89, 112, 174, 0.06);
  --chip-border: rgba(89, 112, 174, 0.16);

  --accent: var(--neutral-white);
  --accent-text: var(--neutral-ink);
  --accent-soft: rgba(89, 112, 174, 0.16);
  --accent-on-soft: #8ba4ea; /* ≥ 6:1 sobre o -soft composto em surface, card e hover */

  --focus-ring: rgba(255, 255, 255, 0.5);
  --selection-bg: rgba(235, 191, 96, 0.25);

  /* Forms — variants dark de Input/Select/Label da brand library */
  --input-bg: #0a0d12;
  --input-bg-disabled: rgba(255, 255, 255, 0.04);
  --input-border: #262b33;
  --input-border-hover: rgba(255, 255, 255, 0.5);
  --input-border-focus: rgba(255, 255, 255, 0.5);
  --input-placeholder: #80878f; /* 5.36:1 sobre --input-bg */
  --label-text: #d9dee3;

  /* status (fora do Figma — carry-over do v2) */
  --color-positive: #22c55e;
  --color-positive-soft: rgba(34, 197, 94, 0.12);
  --color-positive-soft-hover: rgba(34, 197, 94, 0.24);
  --color-positive-border: rgba(34, 197, 94, 0.3);
  --color-attention: #eab308;
  --color-attention-soft: rgba(234, 179, 8, 0.12);
  --color-attention-soft-hover: rgba(234, 179, 8, 0.24);
  --color-attention-border: rgba(234, 179, 8, 0.35);
  --color-danger: #fa4f4d;
  --color-danger-soft: rgba(239, 68, 68, 0.1);
  --color-danger-soft-hover: rgba(239, 68, 68, 0.2);
  --color-danger-border: rgba(239, 68, 68, 0.25);
  --color-info: #60a5fa;
  --color-info-soft: rgba(96, 165, 250, 0.12);
  --color-info-soft-hover: rgba(96, 165, 250, 0.24);
  --color-info-border: rgba(96, 165, 250, 0.3);
  --color-progress: #8c8bea;
  --color-progress-soft: rgba(125, 124, 217, 0.15);
  --color-progress-soft-hover: rgba(125, 124, 217, 0.3);
  --color-progress-border: rgba(125, 124, 217, 0.3);
  /* -fill NÃO clareia no escuro: os sólidos de texto (#22c55e…) não passam
     AA com branco; a superfície fica profunda de propósito */
  --color-positive-fill: #15803d;
  --color-attention-fill: #b45309;
  --color-danger-fill: #c81e1e;
  --color-info-fill: #2563eb;
  --color-progress-fill: #5b5ad1;
  --color-neutral-fill: #566175; /* slate elevado: ≥ 3:1 vs ink e 6.2:1 com texto branco */
  --text-on-fill: #ffffff;

  /* dados — mesmos matizes e ordem, passos validados contra o ink;
     a ponta clara do gold chega ao gold da marca */
  --categorical-1: #6e8ee2;
  --categorical-2: #bc8930;
  --categorical-3: #3ea885;
  --categorical-4: #4567a8;
  --categorical-5: #6aa05e;
  --categorical-6: #ab6fb4;
  --categorical-1-light: #abc3fc;
  --categorical-2-light: #f0bc66;
  --categorical-3-light: #75dbb6;
  --categorical-4-light: #7398dc;
  --categorical-5-light: #9bd38e;
  --categorical-6-light: #dfa0e8;
  --categorical-1-soft: rgba(110, 142, 226, 0.16);
  --categorical-2-soft: rgba(188, 137, 48, 0.16);
  --categorical-3-soft: rgba(62, 168, 133, 0.16);
  --categorical-4-soft: rgba(69, 103, 168, 0.16);
  --categorical-5-soft: rgba(106, 160, 94, 0.16);
  --categorical-6-soft: rgba(171, 111, 180, 0.16);
  --categorical-1-gradient: linear-gradient(180deg, var(--categorical-1-light), var(--categorical-1));
  --categorical-2-gradient: linear-gradient(180deg, var(--categorical-2-light), var(--categorical-2));
  --categorical-3-gradient: linear-gradient(180deg, var(--categorical-3-light), var(--categorical-3));
  --categorical-4-gradient: linear-gradient(180deg, var(--categorical-4-light), var(--categorical-4));
  --categorical-5-gradient: linear-gradient(180deg, var(--categorical-5-light), var(--categorical-5));
  --categorical-6-gradient: linear-gradient(180deg, var(--categorical-6-light), var(--categorical-6));
  --categorical-7: #adc9ff; /* indigo claro */
  --categorical-8: #fcc771; /* gold claro */
  --categorical-9: #7fa4ea; /* navy claro */
  --categorical-10: #7ce2bd; /* mint claro */
  --categorical-11: #e2a3ec; /* orchid claro */
  --categorical-12: #aae39e; /* green claro */
  --categorical-7-light: #d1e0fc;
  --categorical-8-light: #fee4bb;
  --categorical-9-light: #96baff;
  --categorical-10-light: #93f9d4;
  --categorical-11-light: #f5bdfe;
  --categorical-12-light: #c0fab4;
  --categorical-7-soft: rgba(173, 201, 255, 0.16);
  --categorical-8-soft: rgba(252, 199, 113, 0.16);
  --categorical-9-soft: rgba(127, 164, 234, 0.16);
  --categorical-10-soft: rgba(124, 226, 189, 0.16);
  --categorical-11-soft: rgba(226, 163, 236, 0.16);
  --categorical-12-soft: rgba(170, 227, 158, 0.16);
  --categorical-7-gradient: linear-gradient(180deg, var(--categorical-7-light), var(--categorical-7));
  --categorical-8-gradient: linear-gradient(180deg, var(--categorical-8-light), var(--categorical-8));
  --categorical-9-gradient: linear-gradient(180deg, var(--categorical-9-light), var(--categorical-9));
  --categorical-10-gradient: linear-gradient(180deg, var(--categorical-10-light), var(--categorical-10));
  --categorical-11-gradient: linear-gradient(180deg, var(--categorical-11-light), var(--categorical-11));
  --categorical-12-gradient: linear-gradient(180deg, var(--categorical-12-light), var(--categorical-12));
  /* texto SOBRE o dado (rótulo dentro da barra/fatia): o que tiver mais
     contraste com o preenchimento e a ponta clara. Abaixo de 4.5:1 → rótulo fora. */
  --text-on-categorical-1: var(--neutral-ink);
  --text-on-categorical-2: var(--neutral-ink);
  --text-on-categorical-3: var(--neutral-ink);
  --text-on-categorical-4: var(--neutral-ink);
  --text-on-categorical-5: var(--neutral-ink);
  --text-on-categorical-6: var(--neutral-ink);
  --text-on-categorical-7: var(--neutral-ink);
  --text-on-categorical-8: var(--neutral-ink);
  --text-on-categorical-9: var(--neutral-ink);
  --text-on-categorical-10: var(--neutral-ink);
  --text-on-categorical-11: var(--neutral-ink);
  --text-on-categorical-12: var(--neutral-ink);
  --data-highlight-from: #f0bc66;
  --data-highlight-to: #b2ffe3;
  --data-highlight-gradient: linear-gradient(90deg, var(--data-highlight-from), var(--data-highlight-to));
  --data-other: #687686;
  --sequential-1: #274387;
  --sequential-2: #4160a7;
  --sequential-3: #5d7dc8;
  --sequential-4: #7d9fed;
  --sequential-5: #a9c4fc;
  --diverging-1: #80a3f0;
  --diverging-2: #4f679d;
  --diverging-3: #3a3d41;
  --diverging-4: #886116;
  --diverging-5: #d4a14a;
  --text-on-sequential-1: var(--neutral-white);
  --text-on-sequential-2: var(--neutral-white);
  --text-on-sequential-3: var(--neutral-ink);
  --text-on-sequential-4: var(--neutral-ink);
  --text-on-sequential-5: var(--neutral-ink);
  --text-on-highlight: var(--neutral-ink);
  --data-band: #161e2c; /* faixa de fundo: bullet, banda de referência, mín–máx */
  --judgment-1: #6ace7c;
  --judgment-2: #4e925a;
  --judgment-3: #59616c;
  --judgment-4: #d28a21;
  --judgment-5: #c83a35;
  --text-on-judgment-1: var(--neutral-ink);
  --text-on-judgment-2: var(--neutral-ink);
  --text-on-judgment-3: var(--neutral-white);
  --text-on-judgment-4: var(--neutral-ink);
  --text-on-judgment-5: var(--neutral-white);

  /* Button no escuro: primária = branco sólido + texto ink (hover = o
     mint-gold do outline claro, sobre o branco); secundária = transparente
     com contorno branco 70% (desenho do outline-inverted). */
  --button-fill-bg: var(--neutral-white);
  --button-fill-bg-hover: var(--gradient-mint-gold-hover), var(--neutral-white);
  --button-fill-text: var(--neutral-ink);
  --button-outline-bg: transparent;
  --button-outline-bg-hover: var(--gradient-mint-gold-hover-inverted);
  --button-outline-border: rgba(255, 255, 255, 0.7);
  --button-outline-text: var(--text-primary-light);

  /* ink puro somiria sobre fundo ink — superfície elevada + contorno */
  --bg-tooltip: #10161d;
  --text-tooltip: var(--neutral-white);
  --border-tooltip: rgba(255, 255, 255, 0.12);
}