/* ============================================================================
   iSET · DESIGN TOKENS v3 — fonte única de verdade da identidade
   Nova fase (2026): premium · moderna · AI-first.
   Arquitetura em 3 camadas: primitive → semantic → component.
   Tema claro é o DEFAULT (Klein sobre branco); dark ônix via .theme-dark.
   Papéis fixos dos acentos (valem nos dois temas):
     Klein = marca/ação · Prata = premium comum · Ouro = PRIME · Ciano = IA.
   ============================================================================ */
:root{
  /* ---------- 1. PRIMITIVE ---------- */
  /* Azul Klein (canônico #0028A8 — alinhado ao iPay) */
  --klein-950:#030B2E; --klein-900:#001E80; --klein-800:#00239A;
  --klein-700:#0028A8; --klein-500:#2E4FD0; --klein-400:#4F69D9;
  --klein-200:#B9C4F0; --klein-100:#E2E8FB; --klein-50:#F1F4FE;

  /* Ônix (superfícies dark — herdado do sistema Vixon) */
  --onyx-950:#070709; --onyx-900:#0B0B0E; --onyx-850:#101014;
  --onyx-800:#15151A; --onyx-700:#1D1D23; --onyx-600:#26262E;

  /* Prata (metal do conteúdo comum) */
  --silver-700:#6E6F76; --silver-600:#8E8F96; --silver-400:#BDBEC4;
  --silver-200:#E4E5E9; --silver-100:#F3F3F6;

  /* Ouro (exclusivo PRIME) */
  --gold-900:#6E4C12; --gold-800:#8A5F18; --gold-700:#A97B1F;
  --gold-500:#E8B23A; --gold-400:#F4C64E; --gold-300:#FFD873; --gold-100:#FFEFC2;

  /* Ciano elétrico (exclusivo IA/tech) */
  --cyan:#00C2FF; --cyan-deep:#0083AD;

  /* Sidebar (composite sobre klein-950 — sidebar SEMPRE escura nos 2 temas).
     Pré-calculados a partir das camadas translúcidas do kit (rgba(79,105,217,
     .10/.16/.25), rgba(189,190,196,.45/.5), rgba(228,229,233,.08) e texto
     rgba(242,243,247,.64)) compostas sobre klein-950 #030B2E — hex sólido,
     theme-invariante, sem alpha em runtime. */
  --sidebar-item-fg:#9C9FAF; --sidebar-item-hover-bg:#0B143F;
  --sidebar-item-active-bg:#0F1A49; --sidebar-count-bg:#162259;
  --sidebar-label-fg:#575C72; --sidebar-foot-border:#151C3D; --sidebar-role-fg:#606479;
  /* Ramo ABERTO do menu: fundo levemente mais claro na sub-árvore + fio-guia
     (silver sutil) conectando pai→filhos aninhados (indent guide). */
  --sidebar-subtree-bg:rgba(255,255,255,.025); --sidebar-guide:rgba(189,190,196,.2);
  /* Superfície do sidebar: gradiente vertical SUTIL (topo levemente erguido do
     klein-950, aterra no #030B2E embaixo p/ ancorar rodapé/usuário). O topo
     #0A1238 fica ABAIXO de hover/active (#0B143F/#0F1A49) → estados de item
     seguem lendo sem recalcular. Hairline prata na borda direita (silver-400
     .5, fade nos cantos como o .rule-metal do kit) marca onde o menu termina. */
  --sidebar-bg:linear-gradient(180deg,#0A1238 0%,#050D30 58%,var(--klein-950) 100%);
  /* Hairline PRATA premium: metal vertical (sombra→brilho #F6F6F8→sombra, como o
     --grad-silver do kit) → sheen metálica, não cinza chapado. Fade só nas pontas. */
  --sidebar-edge:linear-gradient(180deg,rgba(142,143,150,0) 0%,#8E8F96 7%,#DFE0E4 30%,#F6F6F8 50%,#C4C5CB 70%,#8E8F96 93%,rgba(142,143,150,0) 100%);
  /* Indicador do item ATIVO: barra PRATA METÁLICA vertical (sombra→brilho #F6F6F8
     →sombra, família --grad-silver do kit) — renderizada como ::before, porque um
     border-left não aceita gradiente e o hex chapado #DFE0E4 lê BRANCO (sem brilho).
     Item de IA segue ciano (regra da marca). */
  --sidebar-item-active-edge:linear-gradient(180deg,#8E8F96 0%,#DFE0E4 22%,#F6F6F8 50%,#C4C5CB 74%,#8E8F96 100%);

  /* Editor topbar (composite sobre klein-950 — mesmo mecanismo do Sidebar
     acima; camadas translúcidas do `.edtb` do editor fullscreen: separador
     rgba(255,255,255,.16), borda do botão-ghost "Salvar" rgba(255,255,255,.25),
     badge de rascunho bg rgba(255,255,255,.08)/borda rgba(255,255,255,.14) —
     hex sólido, theme-invariante, sem alpha em runtime). */
  --editor-topbar-sep:#2B324F; --editor-topbar-btn-border:#424862;
  --editor-topbar-badge-bg:#171F3F; --editor-topbar-badge-border:#262D4B;

  /* Semânticas (padrão LP iPay) */
  --green:#10B981; --sky:#0EA5E9; --amber:#F59E0B; --red:#EF4444;

  /* Neutros slate */
  --slate-950:#0F172A; --slate-700:#334155; --slate-600:#475569;
  --slate-500:#64748B; --slate-400:#94A3B8; --slate-200:#E2E8F0;
  --slate-100:#EEF2F6; --slate-50:#F8FAFC; --white:#FFFFFF;

  /* ---------- Gradientes & brilhos assinatura ---------- */
  --grad-klein-deep:linear-gradient(150deg,var(--klein-950) 0%,#041543 38%,var(--klein-900) 72%,var(--klein-700) 130%);
  --grad-klein-cta:linear-gradient(135deg,var(--klein-700),var(--klein-900));
  --grad-gold:linear-gradient(125deg,#7E5A16 0%,#CF9A2C 22%,#F4C64E 42%,#FFEFC2 52%,#E8B23A 66%,#9A6F1E 88%,#6E4C12 100%);
  --grad-silver:linear-gradient(125deg,#7E7F86 0%,#DFE0E4 30%,#F6F6F8 50%,#B9BAC0 72%,#8E8F96 100%);
  --grad-onyx:radial-gradient(120% 120% at 50% -10%,#15151A 0%,#0B0B0E 46%,#070709 100%);
  --glow-cyan:radial-gradient(circle,rgba(0,194,255,.22),rgba(0,194,255,.05) 42%,transparent 68%);
  --glow-sky:radial-gradient(circle,rgba(14,165,233,.24),rgba(14,165,233,.06) 42%,transparent 68%);
  --glow-silver:radial-gradient(circle,rgba(189,190,196,.16),rgba(189,190,196,.04) 45%,transparent 70%);
  --glow-gold:radial-gradient(circle,rgba(232,178,58,.20),rgba(232,178,58,.05) 40%,transparent 66%);

  /* ---------- 2. SEMANTIC (tema claro — DEFAULT) ---------- */
  /* Canvas em PRATA (não branco) → cards brancos separam do fundo (passe de contraste 2026). */
  --bg:#EBEDF2; --bg-soft:var(--slate-50); --bg-mute:#F4F6F9;
  --surface:var(--white); --surface-2:var(--slate-50); --elevated:var(--white);
  --line:#DCE1E9; --line-strong:#C4CBD7;
  --input:#B7BFCC;                    /* borda de input — peso visível (não some no branco) */
  --hairline-metal:linear-gradient(90deg,transparent,var(--silver-400),transparent);

  /* Tons de superfície ("tags" de bloco): prata (premium comum) · klein (marca/ação) ·
     ônix (bloco escuro nos DOIS temas por design). Ouro=SÓ PRIME, ciano=SÓ IA (não aqui). */
  --surface-silver:var(--silver-100); --surface-silver-border:var(--silver-400); --surface-silver-label:var(--silver-700);
  --surface-klein:var(--klein-50); --surface-klein-border:var(--klein-200); --surface-klein-label:var(--klein-700);
  --surface-onyx:var(--onyx-900); --surface-onyx-border:var(--onyx-600); --surface-onyx-label:var(--silver-400); --surface-onyx-fg:#F2F3F7;
  /* brand — GRADIENTE do menu (klein royal vivo, mesma família do --sidebar-bg
     do [data-sidebar-theme="klein"]). Superfície azul p/ hero de KPIs; texto claro
     + label esmaecida (= sidebar-item-fg). NÃO é cor chapada → aplicar via
     `background` (não `background-color`). No claro é VIVO; no dark vira near-black. */
  --surface-brand:linear-gradient(150deg,#0A2A8C 0%,#06196B 52%,#03104A 100%); --surface-brand-fg:#EAEEFB; --surface-brand-label:#B7C1EC; --surface-brand-border:rgba(23,64,168,.55);

  --text-hi:var(--slate-950); --text-mid:var(--slate-600); --text-low:var(--slate-500);
  --text-inverse:var(--white);
  --heading:var(--slate-950); --heading-brand:var(--klein-700);

  --accent:var(--klein-700); --accent-hover:var(--klein-900);
  --on-accent:var(--white);
  --accent-tint-04:rgba(0,40,168,.04); --accent-tint-08:rgba(0,40,168,.08);
  --accent-tint-12:rgba(0,40,168,.12); --focus-ring:rgba(0,40,168,.18);

  --prime:var(--gold-700);            /* ouro utilizável sobre claro (contraste) */
  --prime-bright:var(--gold-500);
  --on-prime:#1C1405;                 /* texto sobre grad-gold (theme-invariante) */
  --prime-bg:linear-gradient(125deg,rgba(232,178,58,.16),rgba(232,178,58,.05)); /* fundo tintado PRIME (badge/card) */
  --prime-border:rgba(232,178,58,.38);
  --ai:#0089B8;                       /* ciano utilizável sobre claro */
  --ai-bright:var(--cyan);
  --ai-bg:rgba(0,194,255,.10);        /* fundo tintado IA (badge/card) */
  --ai-border:rgba(0,194,255,.28);

  --success:#0E9F6E; --info:var(--sky); --warning:#B45309; --danger:var(--red);
  --success-bg:#E7F8F1; --info-bg:#E7F4FB; --warning-bg:#FEF3E2; --danger-bg:#FDECEC;
  --info-border:rgba(14,165,233,.25); --warning-border:rgba(245,158,11,.3); /* bordas translúcidas (banner/alert) */

  /* Paleta dataviz categórica — ORDEM FIXA (validada; espelha viz.ts do @iset/tokens).
     10 matizes coesos e distinguíveis nos DOIS temas. 1..5 = base histórica;
     6..10 = teal · coral · índigo · lima/chartreuse · violeta-rosa (preenchem os
     vãos do círculo cromático sem colidir com os 5 primeiros). Klein(viz-1) segue
     ancorando a 1ª série. Ouro(PRIME)/ciano(IA) NÃO entram na rotação viz. */
  --viz-1:#2E4FD0; --viz-2:#0E9F6E; --viz-3:#B45309; --viz-4:#BE3A6C; --viz-5:#6D4AC9;
  --viz-6:#0E9BA6; --viz-7:#E35D45; --viz-8:#4133B8; --viz-9:#7E9C1B; --viz-10:#A63DB5;
  --viz-others:#8E8F96; /* "Outros" = prata-600, sempre rotulado */

  /* ---------- 3. TIPOGRAFIA ---------- */
  --font-display:'Space Grotesk',-apple-system,system-ui,sans-serif;
  --font-sans:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',monospace;
  /* e-mail: usar stack de fallback — font-family:Arial,Helvetica,sans-serif */
  --t-xs:.78rem; --t-sm:.9rem; --t-base:1rem; --t-md:1.15rem;
  --t-lg:clamp(1.25rem,2vw,1.5rem); --t-xl:clamp(1.6rem,3vw,2.1rem);
  --t-2xl:clamp(2rem,4vw,2.9rem); --t-3xl:clamp(2.6rem,6vw,4.2rem);
  --lh-tight:1.05; --lh-snug:1.25; --lh-body:1.6;
  --tracking-label:.24em; --tracking-tight:-.02em;
  --nums:tabular-nums; /* font-variant-numeric para KPIs/tabelas */

  /* ---------- ESPAÇO / RAIO / SOMBRA / MOVIMENTO ---------- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:100px;
  --sh-sm:0 4px 14px -6px rgba(15,23,42,.10);
  --sh-card:0 1px 2px rgba(15,23,42,.05),0 10px 26px -14px rgba(15,23,42,.14); /* card presente, sombra fria */
  --sh-lift:0 24px 60px -28px rgba(15,23,42,.22);
  --sh-klein:0 14px 38px -14px rgba(0,40,168,.30);
  --sh-silver:0 18px 50px -22px rgba(110,111,118,.45); /* sombra fria premium */
  --sh-gold:0 16px 44px -18px rgba(232,178,58,.42);
  --sh-cut:inset 0 -12px 10px -12px rgba(15,23,42,.18); /* corte de scroll (modal body) */
  --overlay:rgba(3,11,46,.42);        /* backdrop de modal/drawer */
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.28s;

  /* ---------- EDITOR de e-mail — chip de variável ({token}) ---------- */
  /* Destaque roxo-claro das variáveis dentro do bloco editável (EmailBuilder /
     HighlightedEditable). SÓ do editor — nunca vai no HTML serializado/enviado. */
  --email-var-bg:#EDE9FE; --email-var-fg:#6D28D9;
}

/* ---------- TEMA DARK (ônix) — .theme-dark ---------- */
.theme-dark{
  --bg:var(--onyx-950); --bg-soft:var(--onyx-900); --bg-mute:var(--onyx-850);
  /* Contraste dark (passe 2026-07): card ergue do canvas (onyx-800 sobre onyx-950)
     e a borda-bloco fica visível (line-strong .32). --surface-2/--elevated inalterados
     (onyx-850/onyx-700 ainda leem como camadas ACIMA da nova superfície). */
  --surface:var(--onyx-800); --surface-2:var(--onyx-850); --elevated:var(--onyx-700);
  --line:rgba(228,229,233,.16); --line-strong:rgba(228,229,233,.32);
  --input:rgba(228,229,233,.24);

  /* Tons de superfície (dark). Ônix fica escuro nos DOIS temas por design. */
  --surface-silver:var(--onyx-800); --surface-silver-border:#3A3A43; --surface-silver-label:var(--silver-400);
  --surface-klein:rgba(46,79,208,.16); --surface-klein-border:rgba(79,105,217,.42); --surface-klein-label:#8FA2EC;
  --surface-onyx:#050510; --surface-onyx-border:var(--onyx-700); --surface-onyx-label:var(--silver-600); --surface-onyx-fg:#F2F3F7;
  /* brand (dark) — near-black klein (mesma família do --sidebar-bg default). Mais
     escuro que o claro; ainda ergue do canvas onyx-950 e mantém o texto claro. */
  --surface-brand:linear-gradient(150deg,#0A1238 0%,#050D30 58%,#030B2E 100%); --surface-brand-fg:#EAEEFB; --surface-brand-label:#9AA6DB; --surface-brand-border:rgba(46,79,208,.30);

  --text-hi:#F2F3F7; --text-mid:#A9ABB4; --text-low:var(--silver-600);
  --text-inverse:var(--slate-950);
  --heading:#F2F3F7; --heading-brand:var(--klein-400);

  --accent:var(--klein-500); --accent-hover:var(--klein-400);
  --on-accent:var(--white);
  --accent-tint-04:rgba(79,105,217,.08); --accent-tint-08:rgba(79,105,217,.14);
  --accent-tint-12:rgba(79,105,217,.20); --focus-ring:rgba(79,105,217,.35);

  --prime:var(--gold-500); --prime-bright:var(--gold-300);
  --ai:var(--cyan); --ai-bright:#5FD9FF;

  --success:var(--green); --warning:var(--amber);
  --success-bg:rgba(16,185,129,.12); --info-bg:rgba(14,165,233,.12);
  --warning-bg:rgba(245,158,11,.12); --danger-bg:rgba(239,68,68,.12);

  /* Dataviz dark: degraus próprios só onde a leitura pede (light 2/3/4/7 herdam —
     verde/âmbar/rosa/coral já leem sobre ônix; teal/índigo/lima/violeta-rosa
     clareiam pra sustentar contraste no escuro). */
  --viz-1:#4F69D9; --viz-5:#8B6EE0; --viz-6:#22B8C4; --viz-8:#6E62DE; --viz-9:#A6C43A; --viz-10:#C061D0;

  --sh-sm:0 4px 14px -6px rgba(0,0,0,.5);
  --sh-card:0 1px 2px rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.6);
  --sh-lift:0 24px 60px -24px rgba(0,0,0,.72);
  --overlay:rgba(0,0,0,.55);          /* backdrop de modal/drawer (dark) */

  /* Chip de variável no editor de e-mail (dark): violeta translúcido + texto claro. */
  --email-var-bg:rgba(139,110,224,.22); --email-var-fg:#C4B5FD;
}

/* ============================================================
   TEMAS DE COR do SIDEBAR (menu lateral) — sobrescrevem os --sidebar-*
   via [data-sidebar-theme]. Default (sem atributo ou ="navy") = os valores
   do :root acima. Aplicados por instância (não globais).
   - klein: azul royal do LOGIN (--grad-klein-deep), acabamento PRATA.
   - onyx : ônix quase-preto (--grad-onyx), acabamento OURO (variante PRIME).
   ============================================================ */
[data-sidebar-theme="klein"]{
  --sidebar-bg:linear-gradient(180deg,#0A2A8C 0%,#06196B 52%,#03104A 100%);
  --sidebar-item-active-bg:#1740A8; --sidebar-item-hover-bg:#113596;
  --sidebar-item-fg:#B7C1EC; --sidebar-label-fg:#8390CC; --sidebar-count-bg:#2148C0;
  --sidebar-subtree-bg:rgba(255,255,255,.045); --sidebar-guide:rgba(189,190,196,.26);
  --sidebar-foot-border:#123596;
  /* Cada tema do sidebar TAMBÉM define a família --surface-brand* — assim uma
     área de conteúdo que carregue `data-sidebar-theme` (o AppShell estampa o tema
     no content) faz KPI cards / bulk bar seguirem o menu (klein/navy/onyx). Os
     defaults de :root/.theme-dark seguem valendo p/ conteúdo SEM o atributo. */
  --surface-brand:linear-gradient(150deg,#0A2A8C 0%,#06196B 52%,#03104A 100%); --surface-brand-fg:#EAEEFB; --surface-brand-label:#B7C1EC; --surface-brand-border:rgba(23,64,168,.55);
}
[data-sidebar-theme="navy"]{
  --surface-brand:linear-gradient(150deg,#0A1238 0%,#050D30 58%,#030B2E 100%); --surface-brand-fg:#EAEEFB; --surface-brand-label:#9AA6DB; --surface-brand-border:rgba(46,79,208,.30);
}
[data-sidebar-theme="onyx"]{
  --sidebar-bg:var(--grad-onyx);
  --sidebar-item-active-bg:#1D1D23; --sidebar-item-hover-bg:#15151A;
  --sidebar-item-fg:#8E8F96; --sidebar-label-fg:#5C5C66; --sidebar-count-bg:#26262E;
  --sidebar-foot-border:#26262E;
  --surface-brand:var(--grad-onyx); --surface-brand-fg:#EAEAEC; --surface-brand-label:#9A9AA2; --surface-brand-border:rgba(255,255,255,.10);
  --sidebar-subtree-bg:rgba(232,178,58,.04); --sidebar-guide:rgba(232,178,58,.3);
  /* PRATA → OURO: hairline + indicador do item ativo em metal dourado (com brilho #FFEFC2). */
  --sidebar-edge:linear-gradient(180deg,rgba(138,95,24,0) 0%,#A97B1F 7%,#E8B23A 30%,#FFEFC2 50%,#E8B23A 70%,#A97B1F 93%,rgba(138,95,24,0) 100%);
  --sidebar-item-active-edge:linear-gradient(180deg,#8A5F18 0%,#E8B23A 22%,#FFEFC2 50%,#F4C64E 74%,#8A5F18 100%);
}