/* Vórtice IA - design tokens (cores, fontes, espaçamentos, raios e sombras). Todas as telas usam estes valores;
   a paleta sai da logo (azul-marinho, azul elétrico e ciano). Tema escuro é o padrão; o claro equivalente vale com
   <html data-theme="light"> ou, em "Automático", quando o sistema está no claro. Contraste conferido por
   scripts/contraste.py (texto normal >= 4,5:1, WCAG AA). */

@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900;
  font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  /* Marca */
  --brand-navy: #050B16; --brand-blue: #0A84FF; --brand-cyan: #00C2FF; --brand-glow: #29D3FF;
  --grad-primary: linear-gradient(135deg, #0A84FF 0%, #00C2FF 100%);
  --grad-primary-hover: linear-gradient(135deg, #2A96FF 0%, #29D3FF 100%);
  --grad-border: linear-gradient(135deg, rgba(10,132,255,.65), rgba(0,194,255,.15) 45%, rgba(41,211,255,.5));

  /* Fundos e superfícies */
  --bg: #050B16; --surface: #0A1628; --surface-2: #0F1F38; --surface-3: #142847; --hover: #132A4A;
  --line: #1A2E4D; --line-2: #27446E;
  /* Texto */
  --fg: #FFFFFF; --fg-2: #C9D6EA; --muted: #8FA3C0; --placeholder: #6E83A3; --fg-strong: #FFFFFF;
  /* Primária */
  --primary: #0A84FF; --primary-2: #00C2FF; --primary-text: #4DA8FF; --on-primary: #04101F; --focus: #29D3FF;
  /* Status (texto -fg sobre fundo -bg; a cor pura para ícones, barras e bordas) */
  --ok: #2FD27A; --ok-bg: #0D3A25; --ok-fg: #8CF2BE;
  --warn: #FFB547; --warn-bg: #3D2A08; --warn-fg: #FFD58A;
  --err: #FF5C6C; --err-bg: #46131C; --err-fg: #FFA3AD;
  --info: #29D3FF; --info-bg: #072F48; --info-fg: #93E7FF;
  --neutral: #64748B; --neutral-2: #334155;
  /* Peças da interface */
  --glass: rgba(5, 11, 22, .86); --map-bg: #07111F; --toast-bg: #E8F1FF; --toast-fg: #050B16;
  --sb-top: #081428; --sb-end: #050B16;
  /* Gráficos (azuis e cianos da marca + cores de apoio distinguíveis) */
  --chart-1: #0A84FF; --chart-2: #00C2FF; --chart-3: #8C9BFF; --chart-4: #2FD27A; --chart-5: #FFB547;
  --chart-6: #FF5C6C; --chart-7: #C08BFF; --chart-8: #5DE2E7;

  /* Tipografia */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: .75rem; --text-sm: .82rem; --text-md: .94rem; --text-lg: 1.1rem; --text-xl: 1.35rem;

  /* Espaçamentos, raios e sombras */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-2: 0 10px 40px rgba(0, 0, 0, .45);
  --glow-primary: 0 0 0 1px rgba(41, 211, 255, .25), 0 6px 22px rgba(10, 132, 255, .38);
  --glow-soft: 0 0 24px rgba(41, 211, 255, .25);

  /* Nomes antigos (as telas existentes continuam funcionando) */
  --bg-2: var(--surface); --panel: var(--surface-2); --panel-2: var(--surface-3);
  --accent: var(--primary); --accent-2: var(--primary-text); --accent-fg: var(--on-primary);
  --purple: #A98BFF; --teal: #2DD4BF;
}

/* Tema claro equivalente: mesma primária, fundos e textos ajustados */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F2F5FA; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #EDF2F9; --hover: #E4ECF8;
  --line: #D7E0EC; --line-2: #BCC9DB;
  --fg: #0A1628; --fg-2: #22344F; --muted: #4F607A; --placeholder: #7A8AA2; --fg-strong: #050B16;
  --primary-text: #0062C4; --focus: #0A84FF;
  --ok: #16A34A; --ok-bg: #DCFCE7; --ok-fg: #14532D;
  --warn: #C26A04; --warn-bg: #FEF3C7; --warn-fg: #78350F;
  --err: #DC2638; --err-bg: #FFE4E6; --err-fg: #9F1239;
  --info: #0284C7; --info-bg: #E0F2FE; --info-fg: #075985;
  --neutral: #64748B; --neutral-2: #CBD5E1;
  --glass: rgba(255, 255, 255, .88); --map-bg: #E8EEF6; --toast-bg: #0A1628; --toast-fg: #FFFFFF;
  --sb-top: #FFFFFF; --sb-end: #EEF3FA;
  --chart-1: #0A6FE0; --chart-2: #0096CC; --chart-3: #5B6BE0; --chart-4: #16A34A; --chart-5: #D97706;
  --chart-6: #DC2638; --chart-7: #8B5CF6; --chart-8: #0E9FA5;
  --shadow-1: 0 1px 2px rgba(15, 31, 56, .08), 0 4px 14px rgba(15, 31, 56, .08);
  --shadow-2: 0 10px 40px rgba(15, 31, 56, .18);
  --glow-primary: 0 0 0 1px rgba(10, 132, 255, .25), 0 6px 18px rgba(10, 132, 255, .25);
  --glow-soft: 0 0 18px rgba(10, 132, 255, .18);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] {
    color-scheme: light;
    --bg: #F2F5FA; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #EDF2F9; --hover: #E4ECF8;
    --line: #D7E0EC; --line-2: #BCC9DB;
    --fg: #0A1628; --fg-2: #22344F; --muted: #4F607A; --placeholder: #7A8AA2; --fg-strong: #050B16;
    --primary-text: #0062C4; --focus: #0A84FF;
    --ok: #16A34A; --ok-bg: #DCFCE7; --ok-fg: #14532D;
    --warn: #C26A04; --warn-bg: #FEF3C7; --warn-fg: #78350F;
    --err: #DC2638; --err-bg: #FFE4E6; --err-fg: #9F1239;
    --info: #0284C7; --info-bg: #E0F2FE; --info-fg: #075985;
    --neutral: #64748B; --neutral-2: #CBD5E1;
    --glass: rgba(255, 255, 255, .88); --map-bg: #E8EEF6; --toast-bg: #0A1628; --toast-fg: #FFFFFF;
    --sb-top: #FFFFFF; --sb-end: #EEF3FA;
    --chart-1: #0A6FE0; --chart-2: #0096CC; --chart-3: #5B6BE0; --chart-4: #16A34A; --chart-5: #D97706;
    --chart-6: #DC2638; --chart-7: #8B5CF6; --chart-8: #0E9FA5;
    --shadow-1: 0 1px 2px rgba(15, 31, 56, .08), 0 4px 14px rgba(15, 31, 56, .08);
    --shadow-2: 0 10px 40px rgba(15, 31, 56, .18);
    --glow-primary: 0 0 0 1px rgba(10, 132, 255, .25), 0 6px 18px rgba(10, 132, 255, .25);
    --glow-soft: 0 0 18px rgba(10, 132, 255, .18);
  }
}