/* ============================================================================
   ShvIA / ANNA — Design Tokens (fonte única da verdade)
   ----------------------------------------------------------------------------
   Carregue ESTE arquivo ANTES de qualquer outro CSS, em qualquer tela. Os
   blocos :root duplicados que existiam em app.css e chat-workspace.css foram
   REMOVIDOS para que estes valores não sejam sobrescritos (eles carregam
   depois deste arquivo e venciam por ordem de cascata).

   ── Redesign ANNA (jun/2026) · "console de inferência local" ──
     • MARCA = AZURE (--azure). Antes a marca era verde-água (#54c6a5); agora o
       VERDE é só STATUS (online / saudável / sucesso). Âmbar = atenção;
       vermelho = erro/offline. Ver o de-para nos "BRIDGES" no fim do bloco.
     • Tipografia: Space Grotesk (identidade/headers) · IBM Plex Sans (leitura)
       · IBM Plex Mono (telemetria/código/dados, com tabular-nums).
     • Referência visual canônica: .continue/anna-chat-mockup.html
   Temas: 10 presets (8 escuros + Paper/Sépia claros) — ver bloco abaixo.
   O `color-scheme` é por preset; NÃO assuma dark em regra nova.
   ============================================================================ */
:root {
  /* Widgets NATIVOS (select aberto, checkbox, scrollbar) em dark: sem isto o
     WebKit (WKWebView/WebKitGTK) pinta o chrome nativo de BRANCO num app
     dark-only — ex.: selects do painel de perfil. */
  color-scheme: dark;

  /* ── Superfícies (ramp dark frio e calmo, em camadas) ─────────────────── */
  --bg:   #0B0F17;
  --bg-2: #0E131D;
  --bg-3: #131A26;
  --bg-4: #19212F;
  --line:   rgba(150, 170, 200, 0.10);
  --line-2: rgba(150, 170, 200, 0.18);

  /* ── Texto ───────────────────────────────────────────────────────────── */
  --tx:       #ECF1F8;
  --tx-dim:   #97A3B5;
  --tx-faint: #5E6B82;

  /* ── Marca / identidade (AZURE) ──────────────────────────────────────── */
  --azure:        #34B3EC;
  --azure-deep:   #0071BD;
  --azure-strong: #5FC8F5;
  --azure-soft:   rgba(52, 179, 236, 0.12);
  --azure-line:   rgba(52, 179, 236, 0.35);
  --on-accent:    #04121D; /* texto SOBRE a marca (avatar/tab ativa/botões);
                              temas claros de marca escura sobrescrevem p/ branco */

  /* ── Status (cor COM função) ─────────────────────────────────────────── */
  --green:  #2BD576;  --green-soft: rgba(43, 213, 118, 0.12);   /* online / saudável / sucesso */
  --amber:  #F5C242;  --amber-soft: rgba(245, 194, 66, 0.12);   /* atenção / instrução / parar */
  --red:    #EF6E6E;  --red-soft:   rgba(239, 110, 110, 0.12);  /* erro / offline / destrutivo */
  --violet: #9B8CFF;

  /* ── Papéis de mensagem (chat) ───────────────────────────────────────── */
  --user:      #1A2230;   /* superfície da mensagem do usuário */
  --assistant: #131A26;   /* superfície sutil da resposta da ANNA (= --bg-3) */

  /* ── Tipografia ──────────────────────────────────────────────────────── */
  --font-sans:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  /* aliases curtos (nomes usados no mockup) */
  --sans: var(--font-sans);
  --disp: var(--font-display);
  --mono: var(--font-mono);

  /* ── Métricas de leitura ─────────────────────────────────────────────── */
  --read: 760px;   /* largura da coluna de leitura do chat */
  --composer: 960px; /* card do input, mais largo que --read: os 4 selects
                        (Infra/Modelo/Esforço/Saída) + refresh + saldo cabem
                        numa linha (24/07 — em 760/840px quebrava em 2). */
  --rd:   14px;    /* raio padrão do mockup */

  /* ── Raios ───────────────────────────────────────────────────────────── */
  --radius-xl: 28px;   /* shells / cartões grandes */
  --radius-lg: 22px;   /* cartões */
  --radius-md: 16px;   /* botões / inputs */
  --radius-sm: 12px;   /* chips / campos compactos */
  --radius-pill: 999px;/* badges / toasts */

  /* ── Movimento ────────────────────────────────────────────────────────
     Regra do produto (PRODUCT.md): movimento é ESTADO, não decoração. Curvas
     de desaceleração natural — nada de bounce/elastic, que chamam atenção
     pra própria animação. Duração: feedback ≤150ms, mudança de estado ~200ms,
     camada nova (modal) ~240ms. Saída é ~75% da entrada. */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 130ms;   /* press, cor, hover  */
  --dur:      200ms;   /* troca de estado    */
  --dur-slow: 240ms;   /* overlay / camada   */

  /* ── Elevação / sombras (escala dark multinível) ─────────────────────── */
  --shadow-xs: 0 1px 2px rgba(3, 8, 14, 0.32);
  --shadow-sm: 0 2px 6px rgba(3, 8, 14, 0.34);
  --shadow-md: 0 8px 20px rgba(3, 8, 14, 0.38);
  --shadow-lg: 0 14px 40px rgba(3, 8, 14, 0.40);
  --shadow-xl: 0 24px 80px rgba(3, 8, 14, 0.42);
  --shadow:    0 24px 80px rgba(3, 8, 14, 0.42);

  /* ── BRIDGES (compat) — nomes antigos → nova paleta ──────────────────────
     Mantêm app.css / chat-workspace.css / admin.css funcionando SEM reescrita,
     já adotando a nova identidade. As fases Chat/Admin do redesign vão trocar
     usos específicos por estes tokens diretamente (ex.: badge "Ativo" → --green
     em vez de --accent). */
  --bg-soft:        rgba(14, 19, 29, 0.84);   /* glass frio (era #0f141b) */
  --surface-strong: rgba(25, 33, 47, 0.96);   /* glass forte frio (→ bg-4) */
  --text:  var(--tx);
  --muted: var(--tx-dim);
  --accent:        var(--azure);              /* ★ marca: verde-água → AZURE */
  --accent-strong: var(--azure-strong);

  --status-ok:           var(--green);        /* "ok/online" agora é VERDE (era dourado) */
  --status-ok-ring:      var(--green-soft);
  --status-warning:      var(--amber);        /* aviso agora é ÂMBAR (era vermelho) */
  --status-warning-ring: var(--amber-soft);
  --status-offline:      var(--red);
  --status-offline-ring: var(--red-soft);

  --sidebar-bg:          rgba(11, 15, 23, 0.92);
  --sidebar-border:      var(--line);
  --sidebar-card:        rgba(19, 26, 38, 0.78);
  --sidebar-card-strong: rgba(25, 33, 47, 0.92);
}

/* ============================================================================
   ENTRADAS (24/07) — popover dos selects e modais
   ----------------------------------------------------------------------------
   @keyframes e NÃO transition disparada por JS: o estado DEFAULT do elemento é
   o visível, e a animação só reproduz o deslocamento inicial. Se a animação não
   rodar (aba oculta, renderizador headless, motor sem rAF), o conteúdo aparece
   igual — gated visibility é como um popover "some" de vez. Aprendido na
   marra: a 1ª versão usava opacity:0 inline + requestAnimationFrame e ficava
   invisível quando o rAF não vinha.

   Regra dura aqui: as entradas animam SÓ transform, nunca opacity. Num
   renderizador que congela animações em t=0 (aconteceu no harness headless),
   um `from { opacity: 0 }` deixa o elemento INVISÍVEL pra sempre; já um
   deslocamento congelado é imperceptível (4px fora do lugar). Movimento que
   pode custar a visibilidade do conteúdo não vale o efeito.
   ============================================================================ */
@keyframes shvia-pop-in {
  from { transform: translateY(5px); }
}
@keyframes shvia-box-in {
  from { transform: translateY(10px); }
}
.select-pop      { animation: shvia-pop-in var(--dur) var(--ease-out-quart); }
.shvia-modal-box { animation: shvia-box-in var(--dur-slow) var(--ease-out-quart); }

/* ============================================================================
   MOVIMENTO REDUZIDO — rede de segurança global (24/07)
   ----------------------------------------------------------------------------
   Duas camadas, de propósito:
   1. Zera os TOKENS de duração: como todo movimento novo usa var(--dur*), o
      sistema inteiro para sem precisar de !important nem seletor universal.
   2. Varredura universal como rede: pega as transições legadas que ainda têm
      duração cravada no CSS (0.15s ease e afins) e qualquer @keyframes.
   Os blocos pontuais que já existiam (barras da GPU, spinner do Code, pulso do
   status) seguem valendo — este bloco os cobre também.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01ms;
    --dur:      0.01ms;
    --dur-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   THEME PRESETS — F3/O1 do roadmap hermes/odysseus
   ----------------------------------------------------------------------------
   O bloco :root acima é o tema canônico (dark-glass, marca AZURE). Para usar
   outro preset, defina data-theme="<preset>" no <html> (o shell injeta inline
   no <head> antes do CSS para evitar FOUC). Tokens derivados (--accent,
   --bg-soft, --surface-strong, --sidebar-*) re-apontam aqui porque são
   "bridges" que mantêm app.css / chat-workspace.css / admin.css funcionando
   sem reescrita.

   Presets disponíveis:
     dark-glass     → canônico (default se data-theme ausente)
     terracota      → quente, identitário (marca terracota)
     cerrado        → terra dourada, marca MOSTARDA (terracota vira --violet)
     oceano         → azul-petróleo profundo (marca ciano-teal)
     floresta       → verde-mata, foco e calma (marca verde-folha)
     nebulosa       → violeta noturno (marca lavanda)
     paper          → claro, alto contraste para leitura diurna
     sepia          → claro quente, papel envelhecido (marca siena)
     mono           → escala de cinza pura, sensação "terminal"
     high-contrast  → WCAG AAA (brilho alto de texto em quase-preto)

   Pontos de sincronia ao adicionar um preset (TODOS, checados em 24/07):
     1. este arquivo (bloco :root[data-theme=...])
     2. public/js/shvia-theme.js (PRESETS)
     3. inline no-FOUC de layouts/shell.blade.php e dashboard.blade.php
     4. resources/views/partials/theme-nofouc.blade.php  ← usado pelo ADMIN,
        login, compare e preços; esquecer este faz o guard derrubar a escolha
        pro dark-glass NESSAS telas (bug do cerrado, 2.41.5)
     5. chips do perfil (dashboard.blade.php) + swatch em chat-workspace.css
     6. regra 'in:' de Api/AccountController::update

   Cores em tema CLARO: --azure-strong é a versão mais ESCURA da marca (e não
   a mais clara) — é o token pra TEXTO sobre fundo claro. --on-accent é o texto
   SOBRE a marca (vira branco quando a marca é escura). --azure-line é a marca
   em ~35% pra bordas/filetes.

   ⚠️ Auditado em 24/07 (2.39.1→2.42.x): chat, composer, painel de conta, admin,
   login/cadastro, Modo Code, popovers e modais do JS seguem os tokens, com
   scanner WCAG (0 falhas <4.5:1). Ao criar superfície nova: NUNCA hex fixo nem
   rgba(255,255,255,.0x) — o vidro branco some nos temas claros.
   ============================================================================ */

/* ── terracota (5º preset, F3/O1+#1 do feedback 13/07) — quente "terracota"
   como identidade dominante; atende o pedido do usuário de consolidar a cor
   terracota (antes usada só como acento do Modo Code e do gravador de voz)
   com o sistema de temas visuais. Background em marrom-quente escuro,
   marca terracota, texto creme. ──────────────────────────────────────── */
:root[data-theme="terracota"] {
  color-scheme: dark;

  --bg:   #1A1108;
  --bg-2: #221710;
  --bg-3: #2A1D14;
  --bg-4: #33241A;
  --line:   rgba(220, 180, 140, 0.10);
  --line-2: rgba(220, 180, 140, 0.20);

  --tx:       #F8EFE5;
  --tx-dim:   #C7B4A0;
  --tx-faint: #8C7A66;

  /* Marca TERRACOTA — passa a ser o "azure" desta paleta */
  --azure:        #D88F66;
  --azure-deep:   #B26D45;
  --azure-strong: #EAA580;
  --azure-soft:   rgba(216, 143, 102, 0.14);
  --azure-line:   rgba(216, 143, 102, 0.35);

  --green:  #6FB78A;  --green-soft: rgba(111, 183, 138, 0.12);
  --amber:  #E0B055;  --amber-soft: rgba(224, 176, 85, 0.14);
  --red:    #E07566;  --red-soft:   rgba(224, 117, 102, 0.16);
  --violet: #C8A07C;

  --user:      #2A1D14;
  --assistant: #221710;

  --bg-soft:        rgba(26, 17, 8, 0.86);
  --surface-strong: rgba(42, 29, 20, 0.96);
  --sidebar-bg:          rgba(26, 17, 8, 0.92);
  --sidebar-border:      var(--line);
  --sidebar-card:        rgba(42, 29, 20, 0.78);
  --sidebar-card-strong: rgba(51, 36, 26, 0.92);
}

/* ── cerrado (24/07, pedido do Samir) — meio-caminho entre o terracota e a
   mostarda: terra quente levemente mais DOURADA que o terracota (hue ~38° vs
   ~28°), marca MOSTARDA (ouro de ipê), e o terracota segue vivo como cor
   secundária (--violet) — chips/acentos alternativos fazem a ponte entre os
   dois. Status âmbar deslocado pro LARANJA pra não colidir com a marca. ── */
:root[data-theme="cerrado"] {
  color-scheme: dark;

  --bg:   #1B1309;
  --bg-2: #231A0D;
  --bg-3: #2C2112;
  --bg-4: #372A18;
  --line:   rgba(225, 190, 130, 0.11);
  --line-2: rgba(225, 190, 130, 0.21);

  --tx:       #F8F0DF;
  --tx-dim:   #CBB795;
  --tx-faint: #8F7D5C;

  /* Marca MOSTARDA — passa a ser o "azure" desta paleta */
  --azure:        #D9A83C;
  --azure-deep:   #B08427;
  --azure-strong: #E9BF5F;
  --azure-soft:   rgba(217, 168, 60, 0.14);
  --azure-line:   rgba(217, 168, 60, 0.35);
  --on-accent:    #251604; /* mostarda é clara → texto umber quase-preto */

  --green:  #8CBA6E;  --green-soft: rgba(140, 186, 110, 0.12);
  --amber:  #E29B4E;  --amber-soft: rgba(226, 155, 78, 0.14);
  --red:    #E07566;  --red-soft:   rgba(224, 117, 102, 0.16);
  --violet: #C87F5A;  /* terracota como voz secundária (ponte c/ o tema irmão) */

  --user:      #2C2112;
  --assistant: #231A0D;

  --bg-soft:        rgba(27, 19, 9, 0.86);
  --surface-strong: rgba(44, 33, 18, 0.96);
  --sidebar-bg:          rgba(27, 19, 9, 0.92);
  --sidebar-border:      var(--line);
  --sidebar-card:        rgba(44, 33, 18, 0.78);
  --sidebar-card-strong: rgba(55, 42, 24, 0.92);
}

/* ── oceano — azul-petróleo profundo; parente saturado do dark-glass (que é
   frio/neutro). Fundo de mar, marca ciano-teal. ─────────────────────────── */
:root[data-theme="oceano"] {
  color-scheme: dark;

  --bg:   #06131A;
  --bg-2: #0A1A22;
  --bg-3: #0F222C;
  --bg-4: #152B37;
  --line:   rgba(140, 200, 220, 0.10);
  --line-2: rgba(140, 200, 220, 0.20);

  --tx:       #E8F4F6;
  --tx-dim:   #93B3BC;
  --tx-faint: #5C7B85;

  /* Marca CIANO-TEAL — passa a ser o "azure" desta paleta */
  --azure:        #2BC5D4;
  --azure-deep:   #1897A6;
  --azure-strong: #56DBE8;
  --azure-soft:   rgba(43, 197, 212, 0.14);
  --azure-line:   rgba(43, 197, 212, 0.35);

  --green:  #3FD68C;  --green-soft: rgba(63, 214, 140, 0.12);
  --amber:  #EFC35A;  --amber-soft: rgba(239, 195, 90, 0.14);
  --red:    #F07A72;  --red-soft:   rgba(240, 122, 114, 0.16);
  --violet: #8FA6FF;

  --user:      #13252E;
  --assistant: #0F222C;

  --bg-soft:        rgba(6, 19, 26, 0.86);
  --surface-strong: rgba(15, 34, 44, 0.96);
  --sidebar-bg:          rgba(6, 19, 26, 0.92);
  --sidebar-border:      var(--line);
  --sidebar-card:        rgba(15, 34, 44, 0.78);
  --sidebar-card-strong: rgba(21, 43, 55, 0.92);
}

/* ── floresta — verde-mata escuro, sensação de foco e calma. Marca verde-
   folha; o status "ok" fica mais claro/amarelado que a marca pra não
   colidir com ela. ──────────────────────────────────────────────────────── */
:root[data-theme="floresta"] {
  color-scheme: dark;

  --bg:   #0A140D;
  --bg-2: #0F1B12;
  --bg-3: #142418;
  --bg-4: #1A2E1F;
  --line:   rgba(160, 210, 170, 0.10);
  --line-2: rgba(160, 210, 170, 0.20);

  --tx:       #EAF5EC;
  --tx-dim:   #A3BFA9;
  --tx-faint: #6B8672;

  /* Marca VERDE-FOLHA — passa a ser o "azure" desta paleta */
  --azure:        #58C283;
  --azure-deep:   #3B9E63;
  --azure-strong: #7BD8A0;
  --azure-soft:   rgba(88, 194, 131, 0.14);
  --azure-line:   rgba(88, 194, 131, 0.35);

  --green:  #9BD977;  --green-soft: rgba(155, 217, 119, 0.12);
  --amber:  #E3C05A;  --amber-soft: rgba(227, 192, 90, 0.14);
  --red:    #E57A6B;  --red-soft:   rgba(229, 122, 107, 0.16);
  --violet: #A8C9A0;

  --user:      #17281C;
  --assistant: #142418;

  --bg-soft:        rgba(10, 20, 13, 0.86);
  --surface-strong: rgba(20, 36, 24, 0.96);
  --sidebar-bg:          rgba(10, 20, 13, 0.92);
  --sidebar-border:      var(--line);
  --sidebar-card:        rgba(20, 36, 24, 0.78);
  --sidebar-card-strong: rgba(26, 46, 31, 0.92);
}

/* ── nebulosa — violeta noturno; roxo profundo com marca lavanda. ─────────── */
:root[data-theme="nebulosa"] {
  color-scheme: dark;

  --bg:   #120D1E;
  --bg-2: #171126;
  --bg-3: #1E1730;
  --bg-4: #261E3D;
  --line:   rgba(190, 170, 230, 0.10);
  --line-2: rgba(190, 170, 230, 0.20);

  --tx:       #F0EBFA;
  --tx-dim:   #B3A8CC;
  --tx-faint: #7A6F96;

  /* Marca LAVANDA — passa a ser o "azure" desta paleta */
  --azure:        #A78BFA;
  --azure-deep:   #7C5CE0;
  --azure-strong: #C4B0FF;
  --azure-soft:   rgba(167, 139, 250, 0.14);
  --azure-line:   rgba(167, 139, 250, 0.35);

  --green:  #4FD08C;  --green-soft: rgba(79, 208, 140, 0.12);
  --amber:  #E8BC5C;  --amber-soft: rgba(232, 188, 92, 0.14);
  --red:    #F0788C;  --red-soft:   rgba(240, 120, 140, 0.16);
  --violet: #E08BD4;

  --user:      #221A35;
  --assistant: #1E1730;

  --bg-soft:        rgba(18, 13, 30, 0.86);
  --surface-strong: rgba(30, 23, 48, 0.96);
  --sidebar-bg:          rgba(18, 13, 30, 0.92);
  --sidebar-border:      var(--line);
  --sidebar-card:        rgba(30, 23, 48, 0.78);
  --sidebar-card-strong: rgba(38, 30, 61, 0.92);
}

/* ── paper (claro) ───────────────────────────────────────────────────────── */
:root[data-theme="paper"] {
  color-scheme: light;

  --bg:   #FAFAF7;
  --bg-2: #F2F1ED;
  --bg-3: #E8E6DF;
  --bg-4: #DDDAD0;
  --line:   rgba(40, 50, 70, 0.10);
  --line-2: rgba(40, 50, 70, 0.20);

  --tx:       #1A1F2A;
  --tx-dim:   #4A5468;
  --tx-faint: #76808F;

  /* Marca mantém o AZURE (identidade), só ajusta o soft pra contraste claro */
  --azure:      #0071BD;
  --azure-deep: #004A7A;
  --azure-strong: #005A95; /* em tema claro "strong" = MAIS escuro (contraste) */
  --azure-soft:   rgba(0, 113, 189, 0.10);
  --azure-line:   rgba(0, 113, 189, 0.35);
  --on-accent:    #FFFFFF; /* marca escura → texto claro por cima */

  --green:  #0E6434;  --green-soft: rgba(19, 122, 63, 0.12); /* verde-texto 4.5:1 sobre bg-3 */
  --amber:  #8A6B0F;  --amber-soft: rgba(138, 107, 15, 0.14);
  --red:    #B43030;  --red-soft:   rgba(180, 48, 48, 0.12);
  --violet: #5B4CC9;

  --user:      #FFFFFF;
  --assistant: #F4F2EC;

  /* Bridges */
  --bg-soft:        rgba(255, 255, 255, 0.86);
  --surface-strong: rgba(245, 243, 238, 0.96);
  --sidebar-bg:          rgba(250, 250, 247, 0.94);
  --sidebar-border:      var(--line);
  --sidebar-card:        rgba(255, 255, 255, 0.78);
  --sidebar-card-strong: rgba(245, 243, 238, 0.92);
}

/* ── sepia (claro quente) — segundo tema claro; papel envelhecido com marca
   siena. Contrapartida diurna do terracota; segue o padrão do paper de
   escurecer a marca pra ter contraste em fundo claro. ───────────────────── */
:root[data-theme="sepia"] {
  color-scheme: light;

  --bg:   #F7F0E3;
  --bg-2: #F0E7D6;
  --bg-3: #E7DCC6;
  --bg-4: #DCCFB4;
  --line:   rgba(90, 70, 40, 0.12);
  --line-2: rgba(90, 70, 40, 0.22);

  --tx:       #2A2118;
  --tx-dim:   #5C4F3E;
  --tx-faint: #8A7B66;

  /* Marca SIENA — escura o bastante pra contraste em fundo claro */
  --azure:        #A0592A;
  --azure-deep:   #66371A;
  --azure-strong: #78411F; /* em tema claro "strong" = MAIS escuro (contraste) */
  --azure-soft:   rgba(160, 89, 42, 0.12);
  --azure-line:   rgba(160, 89, 42, 0.35);
  --on-accent:    #FFFDF8; /* marca siena escura → texto claro por cima */

  --green:  #1F6B39;  --green-soft: rgba(46, 125, 69, 0.12); /* verde-texto 4.5:1 sobre bg-3 */
  --amber:  #8A6B0F;  --amber-soft: rgba(138, 107, 15, 0.14);
  --red:    #AE3B2E;  --red-soft:   rgba(174, 59, 46, 0.12);
  --violet: #7A5CC0;

  --user:      #FFFDF8;
  --assistant: #F1E9D9;

  --bg-soft:        rgba(252, 247, 237, 0.86);
  --surface-strong: rgba(240, 231, 214, 0.96);
  --sidebar-bg:          rgba(247, 240, 227, 0.94);
  --sidebar-border:      var(--line);
  --sidebar-card:        rgba(255, 253, 248, 0.78);
  --sidebar-card-strong: rgba(240, 231, 214, 0.92);
}

/* ── mono (escala de cinza) ──────────────────────────────────────────────── */
:root[data-theme="mono"] {
  color-scheme: dark;

  --bg:   #000000;
  --bg-2: #0A0A0A;
  --bg-3: #141414;
  --bg-4: #1E1E1E;
  --line:   rgba(220, 220, 220, 0.08);
  --line-2: rgba(220, 220, 220, 0.16);

  --tx:       #EAEAEA;
  --tx-dim:   #A0A0A0;
  --tx-faint: #707070;

  /* Marca vira branco/cinza-claro (sem cromo de cor — sensação terminal) */
  --azure:      #E8E8E8;
  --azure-deep: #B8B8B8;
  --azure-strong: #FFFFFF;
  --azure-soft:   rgba(232, 232, 232, 0.10);
  --azure-line:   rgba(232, 232, 232, 0.35);

  --green:  #B0B0B0;  --green-soft: rgba(176, 176, 176, 0.12);
  --amber:  #C8C8C8;  --amber-soft: rgba(200, 200, 200, 0.14);
  --red:    #888888;  --red-soft:   rgba(136, 136, 136, 0.16);
  --violet: #A8A8A8;

  --user:      #0F0F0F;
  --assistant: #161616;

  --bg-soft:        rgba(8, 8, 8, 0.86);
  --surface-strong: rgba(24, 24, 24, 0.96);
  --sidebar-bg:          rgba(0, 0, 0, 0.94);
  --sidebar-border:      var(--line);
  --sidebar-card:        rgba(20, 20, 20, 0.78);
  --sidebar-card-strong: rgba(30, 30, 30, 0.92);
}

/* ── high-contrast (WCAG AAA) ────────────────────────────────────────────── */
:root[data-theme="high-contrast"] {
  color-scheme: dark;

  --bg:   #000000;
  --bg-2: #050505;
  --bg-3: #0C0C0C;
  --bg-4: #161616;
  --line:   rgba(255, 255, 255, 0.24);
  --line-2: rgba(255, 255, 255, 0.40);

  --tx:       #FFFFFF;
  --tx-dim:   #D5DCE6;
  --tx-faint: #99A4B6;

  --azure:      #6FD3FF;
  --azure-deep: #34B3EC;
  --azure-strong: #9FE3FF;
  --azure-soft:   rgba(111, 211, 255, 0.18);
  --azure-line:   rgba(111, 211, 255, 0.45);

  --green:  #5BEA9E;  --green-soft: rgba(91, 234, 158, 0.20);
  --amber:  #FFD45A;  --amber-soft: rgba(255, 212, 90, 0.20);
  --red:    #FF8585;  --red-soft:   rgba(255, 133, 133, 0.22);
  --violet: #B6A6FF;

  --user:      #141414;
  --assistant: #0E0E0E;

  --bg-soft:        rgba(0, 0, 0, 0.90);
  --surface-strong: rgba(20, 20, 20, 0.98);
  --sidebar-bg:          rgba(0, 0, 0, 0.96);
  --sidebar-border:      var(--line);
  --sidebar-card:        rgba(18, 18, 18, 0.86);
  --sidebar-card-strong: rgba(28, 28, 28, 0.96);
}