/* ═══════════════════════════════════════════════════════════════════
   AURIAN · TOKENS AURORA · DS canônico
   FONTE DA VERDADE dos valores do design system.
   Única referência visual executável: frontend/design-gallery.html.
   Implementação canônica: frontend/src/components/ds/.
   Ao mudar um token, atualizar os consumidores e a story afetada na Gallery.
   ⚠️ SEM BRECHAS: vidro = .ds-glass/.ds-glass-clear; NÃO criar glass custom.

   ── ARQUITETURA (camadas, de baixo p/ cima) ──────────────────────────
   L1 PRIMITIVAS   cor (bg/card/ink) · semântica (ok/warn/err/info) · brand
                   (gold/silver) · categórica (--cat-1..12) · radius · sombra
                   (--sh-sm/md/lg) · motion (--ease*) · tipografia (--ff-*)
   L2 MATERIAIS    glass (--glass-*) · placa Raycast (--sh-plate/press/tray/
                   raised/card, --bevel-*) · --hairline · --glow-amb · frost
   L3 UTILITÁRIOS  classes token-driven: .ds-glass · .ds-tint · .ds-noise
   L4 TEMAS        data-t (dark/light) · data-sb-shade · data-chart-palette
   L5 LEGACY       aliases de compat (DEPRECATED — só p/ páginas não migradas;
                   NÃO usar em código novo; encolher com o tempo)
   Componentes (Card/Button/Drawer/…) → frontend/src/components/ds/*.css

   Fontes: Cormorant Garamond (wordmark/display de marca) + Geist +
   JetBrains Mono (NÃO Instrument Serif; Cinzel aposentada na proposta 01)
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/fonts/aurora/cormorant-garamond-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/aurora/geist-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/aurora/jetbrains-mono-latin.woff2') format('woff2');
}

/* Permite animar de/para `auto` (altura de overlay que expande). Progressivo:
   onde o motor não suporta, a mudança acontece sem transição, sem quebrar nada. */
:root { interpolate-size: allow-keywords; }

/* ── DARK (default) ── */
:root,
[data-t="dark"] {
  /* Proposta 01 (gate F1 aprovado 2026-07-05): fundo desce pro preto-azulado
     do brand; superfícies #0E1016/#151822. */
  --bg:#08090D; --bg-2:#0B0D13; --card:#0E1016; --card-hi:#151822;
  /* ink-4 é o último tier textual e mantém AA sobre card-hi; ink-5 é estrutural/decorativo. */
  --ink-1:#F5F7FA; --ink-2:#D4D8DE; --ink-3:#9DA4AD; --ink-4:#79828F; --ink-5:#464C56;
  --line:rgba(200,205,213,0.10); --line-2:rgba(200,205,213,0.18);
  --silver:#C8CDD5; --silver-soft:rgba(200,205,213,0.12); --silver-line:rgba(200,205,213,0.32); --silver-glow:rgba(200,205,213,0.28);
  /* Gold vars REMAPEADAS para prata — assinatura dark é prata */
  --gold:#9DA3AE; --gold-hi:#D8DCE3; --gold-soft:rgba(216,220,227,0.10); --gold-glow:rgba(232,236,242,0.42);
  /* Acento de PRODUTO (proposta 01): cyan→violeta. Prata segue institucional
     (chrome, valores, botão sólido); o gradiente marca momentos de produto —
     nav ativa, sparkline, delta de KPI, CTA de produto, BloomSpinner.
     Em TEXTO usar --pd-text/--pd-2-text (contraste AA por tema), nunca a
     base clara sobre fundo claro. */
  --pd-1:#7DD3FC; --pd-2:#A78BFA;
  --pd-grad:linear-gradient(135deg, var(--pd-1), var(--pd-2));
  --pd-soft:rgba(125,211,252,0.10); --pd-2-soft:rgba(167,139,250,0.12);
  --pd-text:#7DD3FC; --pd-2-text:#A78BFA;
  /* Semantic */
  --ok:#6BB597; --ok-soft:rgba(107,181,151,0.12);
  --warn:#C9A35F; --warn-soft:rgba(201,163,95,0.12);
  --err:#C97160; --err-soft:rgba(201,113,96,0.12);
  --info:#A8C0E0; --info-soft:rgba(168,192,224,0.14);
  /* Pendência operacional (vermelho-terracota canônico — NÃO é --warn nem --err) */
  --pend:#D86A52; --pend-soft:rgba(216,106,82,0.12);
  /* Tinta semântica é separada de dot/surface para garantir AA em texto pequeno. */
  --ok-text:#6BB597; --warn-text:#C9A35F; --err-text:#C97160; --info-text:#A8C0E0; --pend-text:#E27B63;
  /* Pill no habitat `card` (construção nova · 2026-09-24): corpo e borda na dose do
     tingimento categórico (.ds-tint), para o estado descolar do card. Só a peça que
     declara habitat="card" lê estes tokens — o default `linha` segue nos *-soft acima.
     `ink-*` = quanto de --ink-1 a tinta ganha para manter AA sobre o corpo mais forte.
     `fill-status` = dose da família de status (--status-*): no claro os tons dela são
     mais leves e pedem mais cor para descolar igual às famílias semânticas.
     `seat` = assento sob a pill (sombra 100% tinta, nunca colorida).
     Pisos vigiados por bin/ds-separacao.mjs. */
  --pill-card-fill:20%; --pill-card-fill-status:20%; --pill-card-edge:40%; --pill-card-halo:26%; --pill-card-bevel:rgba(255,255,255,0.07);
  --pill-card-ink-pend:12%; --pill-card-ink-err:24%; --pill-card-seat:rgba(0,0,0,0.5);
  /* Sidebar deep near-black (proposta 01) */
  --sb-bg:#07080C; --sb-bg-2:#0C0E13; --sb-bg-3:#12141B;
  --sb-fg:rgba(255,255,255,1); --sb-t:rgba(255,255,255,0.86); --sb-t2:rgba(255,255,255,0.62);
  --sb-t3:rgba(255,255,255,0.42); --sb-t4:rgba(255,255,255,0.28);
  --sb-brd:rgba(255,255,255,0.09); --sb-brd-2:rgba(255,255,255,0.16);
  --sb-hov:rgba(255,255,255,0.06); --sb-act:rgba(255,255,255,0.12);
  --sb-glow:rgba(232,236,242,0.10); --sb-corner:rgba(232,236,242,0.32);
  /* Typography — wordmark na fonte de marca da proposta 01 */
  --ff-sans:'Geist',system-ui,sans-serif;
  --ff-wm:'Cormorant Garamond',serif;
  --ff-mono:'JetBrains Mono',monospace;
  --ff-display:var(--ff-sans); /* alias legacy (ds.css usava var órfã — resolvia pra Geist por herança) */
  /* Easing */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --beam:cubic-bezier(0.2,0.6,0.2,1);
  /* Stage internals */
  --topbar-bg:rgba(10,10,10,0.85);
  --row-hover:rgba(255,255,255,0.025);
  --beam-shine:rgba(255,255,255,0.10);
  --beam-shine-peak:rgba(255,255,255,0.22);
  --kpi-beam:rgba(255,255,255,0.04);
  --kpi-beam-peak:rgba(255,255,255,0.07);
  --stage-grid-line:rgba(255,255,255,0.025);
  --stage-aurora-1:rgba(216,220,227,0.02);
  --stage-aurora-2:rgba(216,220,227,0.015);
  --stage-noise-op:0.02;
  --stage-tick:rgba(216,220,227,0.04);
  --stage-mark:rgba(232,236,242,0.12);
  --modal-shadow:rgba(0,0,0,0.6);
  --drawer-shadow:rgba(0,0,0,0.5);
  --bulk-shadow:rgba(0,0,0,0.4);
  --toast-shadow:rgba(0,0,0,0.4);
  --toast-progress-track:rgba(255,255,255,0.06);
  --kbd-bg:rgba(255,255,255,0.04);
  --chk-tick:#0A0A0A;
  --tab-count-bg:rgba(255,255,255,0.08);
  --tab-count-bg-on:rgba(255,255,255,0.14);
  --tab-count-brd:rgba(255,255,255,0.22);
  --pill-mute-bg:rgba(255,255,255,0.04);
  --inner-glow:rgba(255,255,255,0.04);
  --modal-top-glow:rgba(232,236,242,0.35);
  --drawer-footer-bg:rgba(0,0,0,0.15);
  /* Radius */
  --rad-sm:4px; --rad-md:8px; --rad-lg:14px; --rad-xl:22px; --rad-full:999px;
  /* ── ESCALAS ABSTRATAS (theme-independent · 2026-06-10) ──
     Espaçamento base 4px e tamanhos tipográficos canônicos do catálogo.
     Código NOVO usa as escalas; valor solto só com justificativa. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;
  --touch-target-min:44px; /* área mínima de interação em contexto touch */
  /* ── LARGURA DA COLUNA LATERAL (2026-09-04) ──
     Três larguras, escolhidas pelo usuário em Aparência e persistidas por
     aparelho. `--sb-w` é a largura EFETIVA: o App.css a redefine por
     `[data-nav]` na própria .sb, e tanto a coluna quanto a margem do main
     leem só esse token — nenhuma medida de coluna solta no CSS.
     Trilho e tecla vêm do rail canônico da Golden Gallery (`.av2-rail`). */
  --sb-w-confortavel:280px; /* a de sempre: marca grande e respiro largo */
  --sb-w-compacta:208px;    /* padrão: mesma navegação, sem a gordura */
  --sb-w-rail:76px;         /* trilho de ícones — .av2-rail */
  --sb-w:var(--sb-w-compacta);
  --sb-rail-key:46px;       /* tecla do trilho — .av2-rail nav a */
  --sb-rail-emblem:31px;    /* emblema no trilho — .av2-brand img */
  --fs-micro:11px;    /* menor tamanho textual permitido; mono labels tracked */
  --fs-meta:11px;     /* mono meta (ids, timestamps, kbd) */
  --fs-label:12px;    /* KPI label mono 700 */
  --fs-body-sm:12.5px;
  --fs-body:13.5px;
  --fs-read:14px;     /* leitura densa (mínimo da regra de nitidez) */
  --fs-lead:15.5px;
  --fs-title:19px;    /* título de overlay (modal/drawer/painel) */
  --fs-h2:26px;       /* page title compacto */
  --fs-hero:34px;     /* page hero */
  --fs-kpi:44px;      /* valor de KPI (JBM 700 tabular) */
  --fs-gauge:48px;    /* valor de gauge (JBM 700) */
  /* Escala estrutural de stacking — tokens aditivos. Literais altos migram
     progressivamente nas Ondas 4/6; código novo usa somente var(--z-*). */
  --z-raised:10;
  --z-sticky:50;
  --z-nav-fixed:100;
  --z-hamburger:120;
  --z-overlay:1000;
  --z-modal:1010;
  --z-popover:1050;
  --z-toast:1100;
  --z-tooltip:1200;
  --z-noise:2147483000;
  /* Shadows */
  --sh-sm:0 1px 2px rgba(0,0,0,0.4);
  --sh-md:0 1px 2px rgba(0,0,0,0.4), 0 8px 24px -12px rgba(0,0,0,0.6);
  --sh-lg:0 1px 2px rgba(0,0,0,0.4), 0 12px 32px -12px rgba(0,0,0,0.6), 0 24px 60px -20px rgba(0,0,0,0.5);

  /* ── L5 · LEGACY/COMPAT (DEPRECATED) — só p/ páginas não migradas; NÃO usar em código novo ── */
  --bg-3:var(--card-hi);
  --card-2:var(--card);
  --ink-6:var(--ink-5);
  --line-3:rgba(200,205,213,0.28);
  --line-dash:rgba(200,205,213,0.14);
  /* Text tiers */
  --t1:var(--ink-1); --t2:var(--ink-3); --t3:var(--ink-4); --t4:var(--ink-5); --ink:var(--ink-1);
  /* Accent → gold */
  --accent:var(--gold); --accent2:var(--gold-soft); --accent-g:var(--gold-soft);
  /* Glass → card */
  --glass:var(--card); --glass-h:var(--card-hi); --glass-brd:var(--line);
  --glass-inner:none; --glass-sh:var(--sh-md); --glass-sh-h:var(--sh-lg);
  --el:var(--card-hi); --hov:var(--gold-soft); --s1:var(--card);
  /* Borders */
  --brd:var(--line); --brd2:var(--line); --brd-a:var(--gold-soft);
  /* Button */
  --btn-solid-bg:var(--ink-1); --btn-solid-fg:var(--bg); --btn-solid-hv:var(--ink-2);
  --btn-c-sh:0 4px 16px rgba(200,205,213,0.18); --btn-c-sh-h:0 8px 24px rgba(200,205,213,0.28);
  /* Semantic aliases */
  --green:var(--ok); --green-g:var(--ok-soft);
  --red:var(--err); --red-g:var(--err-soft);
  --amber:var(--warn); --amber-g:var(--warn-soft);
  --blue:var(--info); --blue-g:var(--info-soft);
  --violet:#A78BFA; --violet-g:rgba(167,139,250,0.12);
  /* Selection */
  --sel-bg:rgba(216,220,227,0.28); --sel-fg:#D8DCE3;
  /* Orbs / reflect removed */
  --orb1:transparent; --orb2:transparent; --orb3:transparent;
  --reflect:transparent; --specular:transparent;
  /* Text sizing aliases */
  --text-xs:11px; --text-sm:12.5px; --text-md:14px; --text-lg:15.5px; --text-xl:18px;
  /* Spring */
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-out-expo:var(--ease-expo);
  /* Chart palette default (silver) */
  --cpalette:#9DA3AE; --cpalette-hi:#D8DCE3; --cpalette-glow:rgba(157,163,174,0.42);
  /* Profundidade (frost/hairline/glow) — CANÔNICO no Aurora v2 (escada L0→L4).
     Aplicação tela a tela sob demanda (ver ds-aurora-padroes #21/#22). */
  --frost:rgba(255,255,255,0.035); --frost-line:rgba(255,255,255,0.07); --frost-edge:rgba(255,255,255,0.12);
  --hairline:inset 0 0 0 1px var(--line);
  --glow-amb:0 0 0 1px var(--line), 0 0 60px -10px rgba(0,0,0,0.6), 0 40px 90px -50px rgba(0,0,0,0.85);
  /* Acabamento de placa (Raycast-adaptado, prata) — luz-de-cima + tecla + bandeja.
     ADITIVO, sob demanda. Compõe a escala --sh-* existente. */
  --bevel-hi:rgba(255,255,255,0.055); --bevel-lo:rgba(0,0,0,0.22);
  --sh-plate:inset 0 1px 0 0 var(--bevel-hi), var(--sh-sm);
  --sh-press:inset 0 1px 0 0 var(--bevel-hi), inset 0 -1px 0 0 var(--bevel-lo);
  --sh-tray:inset 0 1px 3px rgba(0,0,0,0.22);
  /* L3 = L2 + queda de elevação. É --sh-plate MAIS uma sombra de lift: sem ela
     --sh-raised era literalmente --sh-plate com os layers em ordem trocada
     (um inset + um outset não se sobrepõem, então a ordem não muda o render) e
     .ds-plate/.ds-raised produziam pixels idênticos. A geometria 0 4px 12px -6px
     é própria — não colide com --sh-md (0 8px 24px -12px) nem com o
     0 6px 18px -8px já escrito à mão em telas, então nada pinta duas vezes. */
  --sh-raised:inset 0 1px 0 0 var(--bevel-hi), var(--sh-sm), 0 4px 12px -6px rgba(0,0,0,0.55);
  /* Material glass v2 · calibração CRISTAL (aprovada pelo Getúlio 2026-07-06,
     preview acabamento.html painel C): mais transparente e cortante — blur curto,
     edge dupla (anel externo de luz no box-shadow do .ds-glass), leitura segue
     no fundo quase opaco (--panel-read-bg / .ds-glass-rich).
     ÚNICO vidro do DS. Aplicar via .ds-glass (drawer/modal/toast/painel) ou
     .ds-glass-clear (tooltip/popover). Requer fundo atrás p/ o blur valer. */
  --glass-blur:blur(18px) saturate(160%);
  --glass-bg:rgba(26,28,34,0.52);
  --glass-edge:rgba(0,0,0,0.45);
  --glass-ring:rgba(255,255,255,0.04);
  --glass-rim:rgba(255,255,255,0.18);
  --glass-spec:rgba(255,255,255,0.32);
  --glass-in:rgba(255,255,255,0.03);
  --glass-clear-bg:rgba(24,26,32,0.50);
  --glass-clear-blur:blur(12px) saturate(140%);
  /* ⚠️ REFERÊNCIA LEGADA — glass v1 (o vidro ANTES do Aurora v2). Existe por UM
     motivo só: alimentar o par comparativo do capítulo §vidro da Golden Gallery
     (.av2-glass-v1), que prova por que o v1 foi aposentado (borda clara uniforme,
     sem rim direcional → o vidro não separa do fundo). PROIBIDO em tela de
     produto: material novo é sempre .ds-glass / .ds-glass-clear. */
  --glass1-bg:rgba(28,30,36,0.74);
  --glass1-edge:rgba(255,255,255,0.10);
  /* Cenário do palco comparativo (§vidro) — blobs de mídia rica atrás do vidro.
     É MÍDIA (como uma foto), não chrome: só a Gallery consome. */
  --gz-1:rgba(91,141,239,0.20); --gz-2:rgba(155,123,232,0.16); --gz-3:rgba(87,179,148,0.13);
  --sh-card:var(--sh-md), inset 0 1px 0 0 var(--bevel-hi);
  /* Escala categórica (qualitativa) — codificação de categoria multi-tom, calibrada por tema.
     ADITIVO 2026-06-09: tags, calendários, status agrupados, charts multi-série. Tingir via .ds-tint.
     Hues compartilhados entre temas; o tingimento (bg/borda/ink) adapta via --cat-*-mix. */
  --cat-1:#5B8DEF; --cat-2:#D9924B; --cat-3:#9B7BE8; --cat-4:#D87BA8;
  --cat-5:#57B394; --cat-6:#4FA8C4; --cat-7:#7E96C4; --cat-8:#E0857A;
  --cat-9:#B98AD0; --cat-10:#6FB58A; --cat-11:#9AA0AB; --cat-12:#C9925E;
  --cat-bg-mix:20%; --cat-brd-mix:42%; --cat-ink-c:#ffffff; --cat-ink-a:18%;
  /* ── AURORA v2 · acabamento canônico (Gallery + contrato visual) ── */
  --line-micro:rgba(200,205,213,0.04);
  --gold-text:var(--gold-hi);    /* ouro como TEXTO (light precisa de tom escuro p/ contraste) */
  --beam-pk:0.32;                /* peak do shimmer — exclusivo do botão metal */
  /* Vibrancy — conteúdo "gravado no vidro" (glass hero sobre mídia rica) */
  --vib-1:rgba(255,255,255,0.95); --vib-2:rgba(255,255,255,0.62);
  --vib-3:rgba(255,255,255,0.34); --vib-4:rgba(255,255,255,0.18);
  /* Mídia rica canônica — "o céu" do glass hero (Gallery §vidro).
     Tema-independente de propósito: é mídia (como uma foto), não chrome. */
  --media-sky:radial-gradient(120% 90% at 18% 8%, rgba(110,130,200,0.38), transparent 55%),
              radial-gradient(90% 70% at 85% 100%, rgba(216,122,140,0.30), transparent 62%),
              radial-gradient(70% 60% at 52% 62%, rgba(155,123,232,0.22), transparent 65%),
              linear-gradient(168deg, #10172A 0%, #1B2342 46%, #3A2E50 78%, #5C3A52 100%);
  --media-sky-stars:radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,0.8), transparent 100%),
              radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,0.5), transparent 100%),
              radial-gradient(1.5px 1.5px at 44% 16%, rgba(255,255,255,0.7), transparent 100%),
              radial-gradient(1px 1px at 58% 40%, rgba(255,255,255,0.45), transparent 100%),
              radial-gradient(1px 1px at 73% 10%, rgba(255,255,255,0.6), transparent 100%),
              radial-gradient(1.5px 1.5px at 7% 76%, rgba(255,255,255,0.4), transparent 100%),
              radial-gradient(1px 1px at 38% 86%, rgba(255,255,255,0.35), transparent 100%),
              radial-gradient(1px 1px at 88% 30%, rgba(255,255,255,0.55), transparent 100%),
              radial-gradient(1px 1px at 64% 78%, rgba(255,255,255,0.3), transparent 100%);
  /* Atmosfera (anti-monocromia) — céu de luz fria no topo do stage (Prata viva,
     2026-09-25). Só a --luz, nunca violeta ("coisa de IA"). Elipses em px ancoradas no
     topo: a página longa não estica o céu até o meio da tela. */
  --atmo:radial-gradient(1000px 500px at 8% -100px, color-mix(in srgb, var(--luz) 30%, transparent), transparent 64%),
         radial-gradient(800px 450px at 98% 20px, color-mix(in srgb, var(--luz) 16%, transparent), transparent 62%);
  --atmo-blob-1:rgba(125,211,252,0.06); --atmo-blob-2:rgba(167,139,250,0.05);
  /* Céu noturno do glass-hero (mídia do palco no dark; o par light compõe com
     --pd-* sobre --bg via color-mix — regra theme-aware 2026-07-27) */
  --hero-sky-1:#08090D; --hero-sky-2:#0F1526; --hero-sky-3:#221E3C; --hero-sky-4:#2B2344;
  /* Motion v2 — durations tokenizadas + spring (upgrade linear() via @supports no fim) */
  --dur-1:100ms; --dur-2:150ms; --dur-3:220ms; --dur-4:320ms; --dur-5:500ms;
  --spring-t:320ms;
  /* Overlays — scrim atmosférico (luz atrás do vidro) + vidro rico p/ modais */
  --scrim:rgba(8,9,12,0.55);
  --scrim-rich:
    radial-gradient(46% 40% at 50% 40%, rgba(125,211,252,0.26), transparent 72%),
    radial-gradient(52% 44% at 10% -2%, rgba(110,190,240,0.46), transparent 65%),
    radial-gradient(48% 42% at 90% 102%, rgba(167,139,250,0.42), transparent 65%);
  --glass-rich-bg:rgba(19,22,29,0.72);
  --glass-wash:rgba(255,255,255,0.07);
  --glass-lift:rgba(115,180,235,0.30);
  /* Overlay — HABITAT do modal (contrato do DS · plano 2026-08-30).
     A capacidade é do habitat, não da tela: decisão curta não redimensiona.
     `size="md"|"lg"` do AuroraModal mapeia para decisao|leitura. */
  --modal-decisao:460px;
  --modal-form:min(620px, 100dvw - var(--sp-7));
  --modal-leitura:min(760px, 100dvw - var(--sp-6) * 2);
  --modal-trabalho:min(1080px, 100dvw - var(--sp-8) * 1.6);
  --modal-min-w:460px; --modal-max-w:1280px;
  --modal-min-h:300px; --modal-max-h:900px;
  /* Zonas internas de painel — LEITURA quase opaca (nitidez; o blur é do frame, não do texto) */
  --panel-read-bg:rgba(255,255,255,0.04);
  --panel-zone-bg:rgba(255,255,255,0.03);
  /* Temperatura de CONTEXTO (aprovada pelo founder em 2026-09-21, conferência de
     lote): gelo de produto misturado à superfície canônica, só em faixa de
     contexto (cabeçalho, bandeja de recorte) — NUNCA em tabela de leitura nem em
     trilho de navegação (ambos reprovados). Peças claras (tecla ativa, busca)
     emergem do chão tingido. `-plate` é placa L2 (degradê que esfria no alto),
     `-tray` é bandeja L1. Desde 2026-09-25 a temperatura lê a --luz da Prata viva
     (antes --pd-1): uma luz fria só no DS inteiro. */
  --panel-cool-plate:linear-gradient(160deg, var(--gelo-1), var(--gelo-2) 72%);
  --panel-cool-tray:color-mix(in srgb, var(--luz) 10%, var(--bg-2));
  /* ── ACABAMENTO COM LUZ · Prata viva — PADRÃO do DS (founder, 2026-09-25: "prata viva",
     "sim, vira padrão"). A vida vem de LUZ e ACABAMENTO; os controles seguem em tinta e
     prata institucional. A luz é a da vigília do lótus da landing: gelo no escuro, aço no
     claro. Nunca violeta. Sombra segue 100% tinta: a cor entra como luz, nunca como sombra.
     Consumidores: tecla (botão primário, check, marca-texto), fio (aba ativa, groove), gelo
     (cabeçalho de painel, faixa de contexto R12), atmosfera, borda que pega luz.
     Desenho: docs/plans/2026-09-25-prata-viva-acabamento-padrao.md.
     Os derivados se repetem no bloco claro para valer em subárvore com data-t próprio. */
  --luz:#A0DCFF;
  --luz-halo:color-mix(in srgb, var(--luz) 20%, transparent);
  --luz-brilho:color-mix(in srgb, var(--luz) 55%, transparent);
  --luz-aro:color-mix(in srgb, var(--luz) 28%, transparent);
  --luz-cabeca:#F5FAFF;
  --gelo-1:color-mix(in srgb, var(--luz) 14%, var(--card));
  --gelo-2:color-mix(in srgb, var(--luz) 4%, var(--card));
  --rim-luz:color-mix(in srgb, var(--luz) 18%, transparent);
  --tecla-topo:#FAFBFD; --tecla-base:#D6DCE4; --tecla-contra:#101218;
  --tecla:linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  --fio:linear-gradient(90deg, var(--tecla-base), var(--luz));
  --sh-camada:0 1px 2px rgba(0,0,0,0.5), 0 22px 44px -22px rgba(0,0,0,0.75);
  --sh-camada-alta:0 2px 4px rgba(0,0,0,0.5), 0 30px 56px -22px rgba(0,0,0,0.85);
}

/* ── LIGHT (Alvorada) · slate-blue cool ── */
[data-t="light"] {
  /* Proposta 01 (gate F1, Alt A): base #F2F3F5 + tinta preto-chapado #101218. */
  --bg:#F2F3F5; --bg-2:#EAECF0; --card:#FFFFFF; --card-hi:#F5F6F9;
  /* ink-4 é o último tier textual e mantém AA sobre bg/card; ink-5 é estrutural/decorativo. */
  --ink-1:#101218; --ink-2:#262A34; --ink-3:#4C5160; --ink-4:#676C78; --ink-5:#A8AEB7;
  --line:rgba(14,17,23,0.08); --line-2:rgba(14,17,23,0.14);
  --silver:#5C6470; --silver-soft:rgba(92,100,112,0.10); --silver-line:rgba(92,100,112,0.20); --silver-glow:rgba(92,100,112,0.14);
  /* Light · P1 variante B (aprovada pelo Getúlio 2026-07-06, preview
     acabamento.html §04): TEXTO de acento vira TINTA PRETA (#101218) — o
     azul-escuro #1479B8 sai dos textos/bordas; o CONTRASTE DE PRODUTO fica
     (tints/glows/gradiente na base CLARA cyan→violeta, mesma lógica anti-sujo:
     alpha de tom escuro sobre branco mancha). Gold vars mantêm o NOME (alias
     de assinatura usado no CSS todo). */
  --gold:#101218; --gold-hi:#7DD3FC; --gold-soft:rgba(125,211,252,0.14); --gold-glow:rgba(125,211,252,0.32);
  /* Acento de PRODUTO — gráficos seguem na base clara; TEXTO de produto em
     tom escuro com alma da matiz (não o azul #1479B8 rejeitado no P1) */
  --pd-1:#7DD3FC; --pd-2:#A78BFA;
  --pd-grad:linear-gradient(135deg, var(--pd-1), var(--pd-2));
  --pd-soft:rgba(125,211,252,0.16); --pd-2-soft:rgba(167,139,250,0.14);
  --pd-text:#0E3A52; --pd-2-text:#453486;
  /* Semantic */
  --ok:#2D8B64; --ok-soft:rgba(45,139,100,0.10);
  --warn:#9B6F1A; --warn-soft:rgba(155,111,26,0.10);
  --err:#B34033; --err-soft:rgba(179,64,51,0.10);
  --info:#5A7DB0; --info-soft:rgba(90,125,176,0.10);
  --ok-text:#1F6F4D; --warn-text:#835900; --err-text:#AA3441; --info-text:#3F6499; --pend-text:#B24432;
  /* Pill no habitat `card` — dose do claro (bevel de luz branca; tinta escurece). */
  --pill-card-fill:16%; --pill-card-fill-status:20%; --pill-card-edge:34%; --pill-card-halo:22%; --pill-card-bevel:rgba(255,255,255,0.85);
  --pill-card-ink-pend:8%; --pill-card-ink-err:0%; --pill-card-seat:rgba(16,18,24,0.14);
  /* Sidebar sempre dark no light — não muda (proposta 01) */
  --sb-bg:#07080C; --sb-bg-2:#0C0E13; --sb-bg-3:#12141B;
  --sb-fg:rgba(255,255,255,1); --sb-t:rgba(255,255,255,0.86); --sb-t2:rgba(255,255,255,0.62);
  --sb-t3:rgba(255,255,255,0.42); --sb-t4:rgba(255,255,255,0.28);
  --sb-brd:rgba(255,255,255,0.09); --sb-brd-2:rgba(255,255,255,0.16);
  --sb-hov:rgba(255,255,255,0.06); --sb-act:rgba(255,255,255,0.12);
  --sb-glow:rgba(232,236,242,0.10); --sb-corner:rgba(232,236,242,0.32);
  /* Typography (mesmas fonts; wordmark de marca) */
  --ff-sans:'Geist',system-ui,sans-serif;
  --ff-wm:'Cormorant Garamond',serif;
  --ff-mono:'JetBrains Mono',monospace;
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --beam:cubic-bezier(0.2,0.6,0.2,1);
  /* Stage internals light-adapted */
  --topbar-bg:rgba(244,245,247,0.90);
  --row-hover:rgba(14,17,23,0.03);
  --beam-shine:rgba(14,17,23,0.03);
  --beam-shine-peak:rgba(14,17,23,0.055);
  --kpi-beam:rgba(14,17,23,0.02);
  --kpi-beam-peak:rgba(14,17,23,0.04);
  --stage-grid-line:rgba(14,17,23,0.055);
  --stage-aurora-1:rgba(125,211,252,0.020);
  --stage-aurora-2:rgba(167,139,250,0.014);
  --stage-noise-op:0.02;
  --stage-tick:rgba(20,121,184,0.07);
  --stage-mark:rgba(20,121,184,0.14);
  --modal-shadow:rgba(14,17,23,0.18);
  --drawer-shadow:rgba(14,17,23,0.12);
  --bulk-shadow:rgba(14,17,23,0.10);
  --toast-shadow:rgba(14,17,23,0.12);
  --toast-progress-track:rgba(14,17,23,0.06);
  --kbd-bg:rgba(14,17,23,0.05);
  --chk-tick:#FFFFFF;
  --tab-count-bg:rgba(14,17,23,0.06);
  --tab-count-bg-on:rgba(14,17,23,0.10);
  --tab-count-brd:rgba(14,17,23,0.16);
  --pill-mute-bg:rgba(14,17,23,0.04);
  --inner-glow:rgba(14,17,23,0.03);
  --modal-top-glow:rgba(92,100,112,0.30);
  --drawer-footer-bg:rgba(14,17,23,0.03);
  /* Radius */
  --rad-sm:4px; --rad-md:8px; --rad-lg:14px; --rad-xl:22px; --rad-full:999px;
  /* Shadows */
  --sh-sm:0 1px 2px rgba(14,17,23,0.06);
  --sh-md:0 1px 2px rgba(14,17,23,0.07), 0 10px 28px -12px rgba(14,17,23,0.20);
  --sh-lg:0 1px 2px rgba(14,17,23,0.07), 0 14px 36px -12px rgba(14,17,23,0.26), 0 28px 70px -24px rgba(14,17,23,0.20);

  /* ── L5 · LEGACY/COMPAT (DEPRECATED) — só p/ páginas não migradas; NÃO usar em código novo ── */
  --bg-3:var(--card-hi);
  --card-2:var(--card);
  --ink-6:var(--ink-5);
  --line-3:rgba(14,17,23,0.22);
  --line-dash:rgba(14,17,23,0.10);
  --t1:var(--ink-1); --t2:var(--ink-3); --t3:var(--ink-4); --t4:var(--ink-5); --ink:var(--ink-1);
  --accent:var(--gold); --accent2:var(--gold-soft); --accent-g:var(--gold-soft);
  --glass:var(--card); --glass-h:var(--card-hi); --glass-brd:var(--line);
  --glass-inner:none; --glass-sh:var(--sh-md); --glass-sh-h:var(--sh-lg);
  --el:var(--card-hi); --hov:var(--gold-soft); --s1:var(--card);
  --brd:var(--line); --brd2:var(--line); --brd-a:var(--gold-soft);
  --btn-solid-bg:var(--ink-1); --btn-solid-fg:var(--bg); --btn-solid-hv:var(--ink-2);
  --btn-c-sh:0 4px 16px rgba(20,106,158,0.16); --btn-c-sh-h:0 8px 24px rgba(20,106,158,0.24);
  --green:var(--ok); --green-g:var(--ok-soft);
  --red:var(--err); --red-g:var(--err-soft);
  --amber:var(--warn); --amber-g:var(--warn-soft);
  --blue:var(--info); --blue-g:var(--info-soft);
  --violet:#6D51D4; --violet-g:rgba(109,81,212,0.10);
  --sel-bg:rgba(125,211,252,0.30); --sel-fg:#0E3A52;
  --orb1:transparent; --orb2:transparent; --orb3:transparent;
  --reflect:transparent; --specular:transparent;
  --text-xs:11px; --text-sm:12.5px; --text-md:14px; --text-lg:15.5px; --text-xl:18px;
  --spring:cubic-bezier(0.34,1.56,0.64,1);
  --ease-out-expo:var(--ease-expo);
  /* Light: chart usa cinza neutro (não compete com o chrome da sidebar bright) */
  --cpalette:#9DA3AE; --cpalette-hi:#C8CDD5; --cpalette-glow:rgba(157,163,174,0.42);
  /* Profundidade (frost/hairline/glow) — CANÔNICO no Aurora v2. Aplicação sob demanda. */
  --frost:rgba(14,17,23,0.025); --frost-line:rgba(14,17,23,0.06); --frost-edge:rgba(14,17,23,0.1);
  --hairline:inset 0 0 0 1px var(--line);
  --glow-amb:0 0 0 1px var(--line), 0 0 60px -10px rgba(20,30,50,0.12), 0 44px 90px -50px rgba(20,30,50,0.3);
  /* Acabamento de placa — light (luz-de-cima real branca). ADITIVO, sob demanda. */
  --bevel-hi:rgba(255,255,255,0.85); --bevel-lo:rgba(14,17,23,0.05);
  --sh-plate:inset 0 1px 0 0 var(--bevel-hi), var(--sh-sm);
  --sh-press:inset 0 1px 0 0 var(--bevel-hi), inset 0 -1px 0 0 var(--bevel-lo);
  --sh-tray:inset 0 1px 2px rgba(14,17,23,0.05);
  /* Mesma escada do escuro (ver comentário em --sh-raised acima): L3 = L2 + lift. */
  --sh-raised:inset 0 1px 0 0 var(--bevel-hi), var(--sh-sm), 0 4px 12px -6px rgba(14,17,23,0.16);
  /* Material glass v2 — light · calibração CRISTAL (2026-07-06; rim quase-branco, edge ink suave). */
  --glass-blur:blur(18px) saturate(160%);
  --glass-bg:rgba(255,255,255,0.48);
  --glass-edge:rgba(14,17,23,0.12);
  --glass-ring:rgba(14,17,23,0.035);
  --glass-rim:rgba(255,255,255,0.95);
  --glass-spec:rgba(255,255,255,1);
  --glass-in:rgba(255,255,255,0.25);
  --glass-clear-bg:rgba(255,255,255,0.45);
  --glass-clear-blur:blur(14px) saturate(160%);
  /* ⚠️ REFERÊNCIA LEGADA — glass v1 no claro (ver bloco dark). Só a Gallery usa. */
  --glass1-bg:rgba(255,255,255,0.60);
  --glass1-edge:rgba(255,255,255,0.85);
  /* Cenário do palco comparativo (§vidro) — mais saturado no claro p/ o blur render. */
  --gz-1:rgba(91,141,239,0.35); --gz-2:rgba(155,123,232,0.28); --gz-3:rgba(87,179,148,0.25);
  --sh-card:var(--sh-md), inset 0 1px 0 0 var(--bevel-hi);
  /* Escala categórica — recipe de tingir calibrada p/ claro (texto escuro). CANÔNICO 2026-06-09.
     --cat-1..12 herdam do bloco dark (hues iguais nos dois temas). */
  --cat-bg-mix:14%; --cat-brd-mix:30%; --cat-ink-c:#000000; --cat-ink-a:34%;
  /* ── AURORA v2 · acabamento light (CANÔNICO 2026-06-09) ──
     vib/dur/spring-t herdam de :root (vidro hero é sobre mídia escura nos 2 temas). */
  --line-micro:rgba(14,17,23,0.04);
  --gold-text:#106A9E;
  --beam-pk:0.42;
  --atmo:radial-gradient(1000px 500px at 8% -100px, color-mix(in srgb, var(--luz) 30%, transparent), transparent 64%),
         radial-gradient(800px 450px at 98% 20px, color-mix(in srgb, var(--luz) 16%, transparent), transparent 62%);
  --atmo-blob-1:rgba(125,211,252,0.05); --atmo-blob-2:rgba(167,139,250,0.04);
  /* Overlays light — fundo escurece de verdade; vidro quase opaco (legibilidade) */
  --scrim:rgba(20,24,33,0.45);
  --scrim-rich:
    radial-gradient(46% 40% at 50% 38%, rgba(255,252,242,0.14), transparent 72%),
    radial-gradient(52% 44% at 10% -2%, rgba(125,211,252,0.22), transparent 65%),
    radial-gradient(48% 42% at 90% 102%, rgba(167,139,250,0.18), transparent 65%);
  --glass-rich-bg:rgba(252,253,255,0.86);
  --glass-wash:rgba(255,255,255,0.92);
  --glass-lift:rgba(14,17,23,0.22);
  /* Overlay — HABITAT do modal (contrato do DS · plano 2026-08-30).
     A capacidade é do habitat, não da tela: decisão curta não redimensiona.
     `size="md"|"lg"` do AuroraModal mapeia para decisao|leitura. */
  --modal-decisao:460px;
  --modal-form:min(620px, 100dvw - var(--sp-7));
  --modal-leitura:min(760px, 100dvw - var(--sp-6) * 2);
  --modal-trabalho:min(1080px, 100dvw - var(--sp-8) * 1.6);
  --modal-min-w:460px; --modal-max-w:1280px;
  --modal-min-h:300px; --modal-max-h:900px;
  --panel-read-bg:rgba(255,255,255,0.82);
  --panel-zone-bg:rgba(14,17,23,0.035);
  /* Temperatura de CONTEXTO (aprovada pelo founder em 2026-09-21, conferência de
     lote): gelo de produto misturado à superfície canônica, só em faixa de
     contexto (cabeçalho, bandeja de recorte) — NUNCA em tabela de leitura nem em
     trilho de navegação (ambos reprovados). Peças claras (tecla ativa, busca)
     emergem do chão tingido. `-plate` é placa L2 (degradê que esfria no alto),
     `-tray` é bandeja L1. Desde 2026-09-25 a temperatura lê a --luz da Prata viva
     (antes --pd-1): uma luz fria só no DS inteiro. */
  --panel-cool-plate:linear-gradient(160deg, var(--gelo-1), var(--gelo-2) 72%);
  --panel-cool-tray:color-mix(in srgb, var(--luz) 10%, var(--bg-2));
  /* Acabamento com luz · Prata viva — o claro: aço no lugar do gelo, tecla em tinta. */
  --luz:#8CAAD2;
  --luz-halo:color-mix(in srgb, var(--luz) 20%, transparent);
  --luz-brilho:color-mix(in srgb, var(--luz) 55%, transparent);
  --luz-aro:color-mix(in srgb, var(--luz) 28%, transparent);
  --luz-cabeca:#FFFFFF;
  --gelo-1:color-mix(in srgb, var(--luz) 14%, var(--card));
  --gelo-2:color-mix(in srgb, var(--luz) 4%, var(--card));
  --rim-luz:rgba(255,255,255,0.92);
  --tecla-topo:#3C424E; --tecla-base:#101218; --tecla-contra:#FFFFFF;
  --tecla:linear-gradient(180deg, var(--tecla-topo), var(--tecla-base));
  --fio:linear-gradient(90deg, var(--tecla-base), var(--luz));
  --sh-camada:0 1px 2px rgba(16,18,24,0.06), 0 18px 40px -24px rgba(16,18,24,0.30);
  --sh-camada-alta:0 2px 4px rgba(16,18,24,0.06), 0 28px 52px -24px rgba(16,18,24,0.38);
}

/* ── SIDEBAR SHADE — BRIGHT (cream warm) ── */
[data-sb-shade="bright"] {
  --sb-bg:#E8E2D2; --sb-bg-2:#F2EDDF; --sb-bg-3:#F8F3E5;
  --sb-fg:#1F1B14;
  --sb-t:rgba(31,27,20,0.95);
  --sb-t2:rgba(31,27,20,0.78);
  --sb-t3:rgba(31,27,20,0.55);
  --sb-t4:rgba(31,27,20,0.36);
  --sb-brd:rgba(31,27,20,0.10);
  --sb-brd-2:rgba(31,27,20,0.18);
  --sb-hov:rgba(31,27,20,0.08);
  --sb-act:rgba(31,27,20,0.14);
  --sb-glow:rgba(31,27,20,0.14);
  --sb-corner:rgba(31,27,20,0.40);
  /* Bright sidebar: dashboard usa cinza neutro (não compete com o chrome da sidebar) */
  --gold:#7E848F; --gold-hi:#C8CDD5; --gold-soft:rgba(157,163,174,0.10); --gold-glow:rgba(200,205,213,0.32);
  --silver:#7E848F; --silver-soft:rgba(157,163,174,0.10); --silver-line:rgba(157,163,174,0.30); --silver-glow:rgba(200,205,213,0.22);
  --stage-aurora-1:rgba(126,132,143,0.05); --stage-aurora-2:rgba(126,132,143,0.04);
  --stage-tick:rgba(126,132,143,0.14); --stage-mark:rgba(157,163,174,0.22);
  --cpalette:#7E848F; --cpalette-hi:#C8CDD5; --cpalette-glow:rgba(200,205,213,0.32);
}

/* ── CHART PALETTES ── */
[data-chart-palette="violet"] {
  --cpalette:#A78BFA; --cpalette-hi:#C4B5FD; --cpalette-glow:rgba(167,139,250,0.45);
}
[data-chart-palette="ice"] {
  --cpalette:#7AAEB8; --cpalette-hi:#A8CCD4; --cpalette-glow:rgba(168,204,212,0.45);
}
[data-chart-palette="sage"] {
  --cpalette:#7AA88E; --cpalette-hi:#A8C8B5; --cpalette-glow:rgba(122,168,142,0.45);
}
[data-chart-palette="terra"] {
  --cpalette:#C97160; --cpalette-hi:#E58572; --cpalette-glow:rgba(201,113,96,0.45);
}

/* ── GLOBAL BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--ff-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  transition: background .3s ease, color .3s ease;
}
::selection { background: var(--sel-bg); color: var(--sel-fg); }

/* ── MATERIAL GLASS v2 · painel/drawer/modal/toast flutuante (canônico) ──
   Edge escura separa, rim claro no topo dá a luz, specular no canto, grão 2%.
   Requer fundo atrás p/ o blur valer. O grão (::after) exige position non-static
   no host (drawer/modal já são fixed; painel estático adiciona position:relative).
   ÚNICO vidro do DS — não criar variante fora daqui. Ex.: <div class="ds-glass">. */
.ds-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow:
    0 0 0 1px var(--glass-edge),
    0 0 0 2.5px var(--glass-ring),
    inset 0 1px 0 var(--glass-rim),
    inset 1px 1.5px 0 -1px var(--glass-spec),
    0 20px 55px rgba(0,0,0,0.35),
    0 48px 100px -48px rgba(0,0,0,0.5);
}
[data-t="light"] .ds-glass {
  box-shadow:
    0 0 0 1px var(--glass-edge),
    0 0 0 2.5px var(--glass-ring),
    inset 0 1px 0 var(--glass-rim),
    inset 1px 1.5px 0 -1px var(--glass-spec),
    0 20px 55px rgba(14,17,23,0.12),
    0 48px 100px -48px rgba(14,17,23,0.16);
}
.ds-glass::after { /* grão 2% — autentica o vidro */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  opacity: 0.02; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* clear — tooltip/popover (tint mínimo, blur curto, sem specular) */
.ds-glass-clear {
  background: var(--glass-clear-bg);
  -webkit-backdrop-filter: var(--glass-clear-blur);
  backdrop-filter: var(--glass-clear-blur);
  box-shadow:
    0 0 0 1px var(--glass-edge),
    inset 0 1px 0 var(--glass-rim),
    0 8px 24px rgba(0,0,0,0.22);
}
[data-t="light"] .ds-glass-clear {
  box-shadow: 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-rim), 0 8px 24px rgba(14,17,23,0.10);
}
/* ── ATMOSFERA · céu de luz fria no topo do stage (anti-monocromia) ──
   Aplicar no container do stage: <div class="stage ds-atmo">.
   É FUNDO do stage (camada de background), não camada por cima. Até 2026-09-25 era um
   ::before absoluto, que pinta SOBRE todo conteúdo não posicionado: invisível na dose
   antiga (4,5%), mas tingiria cards e texto na dose da Prata viva. Como fundo, fica
   atrás de tudo sem criar contexto de empilhamento (menu e overlay seguem iguais).
   Página que declara o próprio `background` continua mandando nele. */
.ds-atmo { position: relative; background-image: var(--atmo); }
/* ── TINGIR POR CATEGORIA · defina --cat (hex, ex.: var(--cat-3)) e use as vars resultantes ──
   Ex.: <span class="ds-tint" style="--cat:var(--cat-3)"> → var(--tint-bg)/--tint-brd/--tint-ink. */
.ds-tint {
  --tint-bg:  color-mix(in srgb, var(--cat, var(--gold)) var(--cat-bg-mix), var(--card-hi));
  --tint-brd: color-mix(in srgb, var(--cat, var(--gold)) var(--cat-brd-mix), var(--line));
  --tint-ink: color-mix(in srgb, var(--cat, var(--gold)), var(--cat-ink-c) var(--cat-ink-a));
}

/* ── COMPATIBILIDADE legacy data-theme → data-t ── */
html[data-theme="alvorada"] { /* light já aplicado via data-t */ }
[data-theme="vigilia"]:not([data-t="light"]),
[data-theme="bruma"]:not([data-t="light"]) {
  --bg:#08090D; --bg-2:#0B0D13; --card:#0E1016; --card-hi:#151822;
  --ink-1:#F5F7FA; --ink-2:#D4D8DE; --ink-3:#9DA4AD; --ink-4:#79828F; --ink-5:#464C56;
  --line:rgba(200,205,213,0.10); --line-2:rgba(200,205,213,0.18);
  --gold:#9DA3AE; --gold-hi:#D8DCE3; --gold-soft:rgba(216,220,227,0.10);
  --ok:#6BB597; --ok-soft:rgba(107,181,151,0.12);
  --err:#C97160; --err-soft:rgba(201,113,96,0.12);
  --warn:#C9A35F; --warn-soft:rgba(201,163,95,0.12);
  --ok-text:#6BB597; --warn-text:#C9A35F; --err-text:#C97160; --info-text:#A8C0E0; --pend-text:#E27B63;
  --t1:var(--ink-1); --t2:var(--ink-3); --t3:var(--ink-4); --t4:var(--ink-5);
  --accent:var(--gold); --accent-g:var(--gold-soft);
  --glass:var(--card); --glass-h:var(--card-hi); --glass-brd:var(--line);
  --brd:var(--line); --brd-a:var(--gold-soft);
  --orb1:transparent; --orb2:transparent;
}

/* ── PRISMA — 3º ambiente selecionável sobre a base clara (data-t=light).
   Só sobrescreve atmosfera, produto, chart e chrome da sidebar; conteúdo
   operacional segue nos tokens Aurora. Cyan→violeta via --pd-*; sombra fica ink.
   A profundidade (Céu/Profundo) mora nas regras de .sb do App.css. ── */
html[data-theme="prisma"] {
  --atmo:
    radial-gradient(ellipse 92% 64% at 18% -12%, color-mix(in srgb, var(--pd-1) 18%, transparent), transparent 64%),
    radial-gradient(ellipse 82% 68% at 98% 112%, color-mix(in srgb, var(--pd-2) 16%, transparent), transparent 62%);
  --atmo-blob-1: color-mix(in srgb, var(--pd-1) 14%, transparent);
  --atmo-blob-2: color-mix(in srgb, var(--pd-2) 13%, transparent);
  --stage-aurora-1: color-mix(in srgb, var(--pd-1) 7%, transparent);
  --stage-aurora-2: color-mix(in srgb, var(--pd-2) 6%, transparent);
  --stage-mark: color-mix(in srgb, var(--pd-2) 58%, transparent);
  --stage-tick: color-mix(in srgb, var(--pd-1) 20%, transparent);
  --gold-soft: var(--pd-soft);
  --gold-glow: color-mix(in srgb, var(--pd-1) 38%, transparent);
  --cpalette: var(--pd-2);
  --cpalette-hi: color-mix(in srgb, var(--pd-1) 44%, var(--pd-2));
  --cpalette-glow: color-mix(in srgb, var(--pd-2) 42%, transparent);
  --sb-act: color-mix(in srgb, var(--pd-2) 18%, transparent);
  --sb-hov: color-mix(in srgb, var(--pd-1) 8%, transparent);
  --sb-brd-2: color-mix(in srgb, var(--pd-1) 24%, transparent);
  --sb-glow: color-mix(in srgb, var(--pd-2) 20%, transparent);
  --sb-corner: color-mix(in srgb, var(--pd-1) 42%, transparent);
  /* Céu (data-prisma-depth="sky") — receita canônica demonstrada na Gallery,
     capítulo "O vidro precisa de um céu": base azul-noite → índigo →
     violeta-vinho → mauve + luzes índigo/quente/violeta em alpha moderado p/ o
     papel de sidebar (aprovado 2026-07-11, demo-prisma-ceu-v2 · iteração 8). */
  --psky-1:#10172A; --psky-2:#1B2342; --psky-3:#3A2E50; --psky-4:#5C3A52;
  --psky-glow-cool:rgba(110,130,200,0.30);
  --psky-glow-warm:rgba(216,122,140,0.22);
  --psky-glow-violet:rgba(155,123,232,0.20);
}

/* ── UTILITÁRIOS ── */
.ds-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: var(--z-noise);
  opacity: var(--stage-noise-op, 0.045);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* Estados operacionais R28/R29 aprovados. Informação genérica não é envio.
   Redefinidos por habitat de tema para resolver pigmento/tinta no próprio tema. */
:root, [data-t="dark"], [data-t="light"] {
  --status-confirmed: var(--cat-7);
  --status-confirmed-soft: color-mix(in srgb, var(--status-confirmed) 12%, transparent);
  --status-confirmed-text: color-mix(in srgb, var(--status-confirmed) 62%, var(--ink-1));
  --status-sent: color-mix(in srgb, var(--cat-5) 76%, var(--cat-11));
  --status-sent-soft: color-mix(in srgb, var(--status-sent) 12%, transparent);
  --status-sent-text: color-mix(in srgb, var(--status-sent) 58%, var(--ink-1));
  --status-scheduled: var(--silver);
  --status-scheduled-soft: var(--silver-soft);
  --status-scheduled-text: var(--ink-2);
  --status-pending: color-mix(in srgb, var(--cat-12) 64%, var(--cat-8));
  --status-pending-soft: color-mix(in srgb, var(--status-pending) 12%, transparent);
  --status-pending-text: color-mix(in srgb, var(--status-pending) 58%, var(--ink-1));
  --status-error: color-mix(in srgb, var(--cat-4) 65%, var(--cat-8));
  --status-error-soft: color-mix(in srgb, var(--status-error) 12%, transparent);
  --status-error-text: color-mix(in srgb, var(--status-error) 58%, var(--ink-1));
}

/* R17/R31: material do drawer refinado; o core de leitura continua em --card. */
:root, [data-t="dark"] {
  --drawer-rich-bg: color-mix(in srgb, var(--card) 46%, transparent);
  --drawer-wash: rgba(255, 255, 255, .10);
  --drawer-inner: rgba(255, 255, 255, .07);
  --drawer-drop: 0 6px 16px -8px rgba(0, 0, 0, .45), 0 22px 48px -14px rgba(0, 0, 0, .50);
}
[data-t="light"] {
  --drawer-rich-bg: color-mix(in srgb, var(--card) 54%, transparent);
  --drawer-wash: rgba(255, 255, 255, .62);
  --drawer-inner: rgba(255, 255, 255, .55);
  --drawer-drop: 0 1px 2px rgba(14, 17, 23, .06), 0 10px 24px -10px rgba(14, 17, 23, .14), 0 28px 64px -20px rgba(14, 17, 23, .18);
}

/* ── TECLA FÍSICA · a família de botões (founder, 2026-09-25: "A") ──
   O botão é peça física: parede de 3 px embaixo, sobe 1 px no hover, afunda 3 px no clique.
   Duas matérias: TINTA (primário, ação, ponte sólida) e PLACA (secundário, perigo, slim,
   ícone; o ghost emerge em placa no hover). Sombra de queda 100% tinta; a luz fria entra
   como luz. Desenho: docs/plans/2026-09-25-botoes-tecla.md.
   Matéria por tema: */
:root, [data-t="dark"] {
  --tecla-brilho: rgba(255, 255, 255, .9);
  --tecla-aresta: color-mix(in srgb, var(--tecla-base) 62%, var(--tecla-contra));
  --tecla-parede: color-mix(in srgb, var(--tecla-base) 78%, var(--tecla-contra));
  --tecla-drop: rgba(0, 0, 0, .5);
  --tecla-trava: color-mix(in srgb, var(--card-hi) 70%, var(--bg));
  --placa-face: linear-gradient(180deg, var(--card-hi), var(--card));
  --placa-face-funda: linear-gradient(180deg, var(--card), var(--card-hi));
  --placa-brilho: rgba(255, 255, 255, .075);
  --placa-aresta: var(--line-2);
  --placa-parede: rgba(0, 0, 0, .62);
}
[data-t="light"] {
  --tecla-brilho: rgba(255, 255, 255, .22);
  --tecla-aresta: var(--tecla-base);
  --tecla-parede: var(--tecla-base);
  --tecla-drop: rgba(16, 18, 24, .2);
  --tecla-trava: var(--bg-2);
  --placa-face: linear-gradient(180deg, var(--card), var(--card-hi));
  --placa-face-funda: linear-gradient(180deg, var(--card-hi), var(--card));
  --placa-brilho: rgba(255, 255, 255, 1);
  --placa-aresta: rgba(16, 18, 24, .14);
  --placa-parede: rgba(16, 18, 24, .16);
}
/* Receita, uma declaração só, re-resolvida em cada habitat de tema. Toda sombra composta tem
   8 camadas na MESMA ordem, para a transição interpolar camada a camada:
   1 brilho no alto · 2 sombra na base · 3 aresta · 4 parede · 5 contorno da parede · 6 luz ·
   7 contato · 8 ambiente. Camada que o estado não usa fica `0 0 0 0 transparent`. */
:root, [data-t="dark"], [data-t="light"] {
  --rad-tecla: 10px;
  --tecla-face: linear-gradient(180deg, var(--tecla-topo), color-mix(in srgb, var(--tecla-topo) 30%, var(--tecla-base)));
  --tecla-face-funda: linear-gradient(180deg, var(--tecla-base), color-mix(in srgb, var(--tecla-topo) 45%, var(--tecla-base)));
  /* tinta: parada · ação retroiluminada · mouse em cima · clicando · carregando (segurada) */
  --sh-tecla: inset 0 1px 0 var(--tecla-brilho), inset 0 -1px 0 rgba(0, 0, 0, .07), 0 0 0 1px var(--tecla-aresta),
    0 3px 0 0 var(--tecla-parede), 0 3px 0 1px var(--tecla-aresta), 0 0 0 0 transparent,
    0 5px 8px -2px var(--tecla-drop), 0 16px 24px -14px var(--tecla-drop);
  --sh-tecla-acesa: inset 0 1px 0 var(--tecla-brilho), inset 0 -1px 0 rgba(0, 0, 0, .07), 0 0 0 1px color-mix(in srgb, var(--luz) 55%, var(--tecla-aresta)),
    0 3px 0 0 var(--tecla-parede), 0 3px 0 1px var(--luz-aro), 0 2px 22px -4px var(--luz-brilho),
    0 5px 8px -2px var(--tecla-drop), 0 16px 24px -14px var(--tecla-drop);
  --sh-tecla-alta: inset 0 1px 0 var(--tecla-brilho), inset 0 -1px 0 rgba(0, 0, 0, .07), 0 0 0 1px var(--luz),
    0 4px 0 0 var(--tecla-parede), 0 4px 0 1px var(--luz-aro), 0 2px 26px -2px var(--luz-brilho),
    0 7px 10px -2px var(--tecla-drop), 0 20px 28px -14px var(--tecla-drop);
  --sh-tecla-funda: inset 0 2px 3px rgba(0, 0, 0, .26), inset 0 -1px 0 transparent, 0 0 0 1px var(--tecla-aresta),
    0 0 0 0 var(--tecla-parede), 0 0 0 1px var(--tecla-aresta), 0 0 0 0 transparent,
    0 1px 2px 0 var(--tecla-drop), 0 0 0 0 transparent;
  --sh-tecla-segura: inset 0 2px 3px rgba(0, 0, 0, .26), inset 0 -1px 0 transparent, 0 0 0 1px var(--tecla-aresta),
    0 0 0 0 var(--tecla-parede), 0 0 0 1px var(--tecla-aresta), 0 0 16px -6px var(--luz-brilho),
    0 1px 2px 0 var(--tecla-drop), 0 0 0 0 transparent;
  /* placa: parada · mouse em cima · perigo em cima · clicando e carregando */
  --sh-placa: inset 0 1px 0 var(--placa-brilho), inset 0 -1px 0 transparent, 0 0 0 1px var(--placa-aresta),
    0 3px 0 0 var(--placa-parede), 0 3px 0 1px var(--placa-aresta), 0 0 0 0 transparent,
    0 5px 8px -3px var(--tecla-drop), 0 0 0 0 transparent;
  --sh-placa-alta: inset 0 1px 0 var(--placa-brilho), inset 0 -1px 0 transparent, 0 0 0 1px color-mix(in srgb, var(--luz) 60%, var(--placa-aresta)),
    0 4px 0 0 var(--placa-parede), 0 4px 0 1px var(--placa-aresta), 0 0 18px -6px var(--luz-halo),
    0 7px 10px -3px var(--tecla-drop), 0 0 0 0 transparent;
  --sh-placa-perigo: inset 0 1px 0 var(--placa-brilho), inset 0 -1px 0 transparent, 0 0 0 1px color-mix(in srgb, var(--err) 55%, transparent),
    0 4px 0 0 var(--placa-parede), 0 4px 0 1px color-mix(in srgb, var(--err) 35%, var(--placa-aresta)), 0 0 0 0 transparent,
    0 7px 10px -3px var(--tecla-drop), 0 0 0 0 transparent;
  --sh-placa-funda: inset 0 2px 3px rgba(0, 0, 0, .2), inset 0 -1px 0 transparent, 0 0 0 1px var(--placa-aresta),
    0 0 0 0 var(--placa-parede), 0 0 0 1px var(--placa-aresta), 0 0 0 0 transparent,
    0 1px 2px 0 var(--tecla-drop), 0 0 0 0 transparent;
  /* ghost parado (rente à superfície) · tecla travada (indisponível) */
  --sh-tecla-rente: inset 0 0 0 transparent, inset 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent,
    0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent;
  --sh-tecla-trava: inset 0 1px 2px rgba(0, 0, 0, .12), inset 0 0 0 transparent, 0 0 0 1px var(--placa-aresta),
    0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent, 0 0 0 0 transparent;
}

/* ── SPRING NATIVO · upgrade do --spring p/ linear() onde suportado ──
   Perfil normalizado 0→1 (overshoot ~1.012): escala com a duração da transição.
   Fallback permanece o cubic-bezier(0.34,1.56,0.64,1) definido nos temas. */
@supports (animation-timing-function: linear(0, 1)) {
  :root, [data-t="dark"], [data-t="light"] {
    --spring: linear(0, 0.013 0.6%, 0.05 1.2%, 0.2 2.5%, 0.971 47.2%, 1.012 59.1%, 0.995 70.8%, 1);
    --spring-t: 560ms;
  }
}