/* ─── Design tokens — Identidade Velen ──────────────────────────────
   Azul   #0D47A1  confiança / tecnologia   (primária)
   Roxo   #7C3AED  inovação / IA            (acento)
   Verde  #22C55E  crescimento / resultado  (sucesso)
   Petróleo #122C4D  texto sobre claro + base do tema escuro
   Tema CLARO é o padrão; escuro via [data-theme="dark"]. Os aliases
   --violet* apontam para a marca nova — o CSS legado herda sem refactor. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Tema claro (padrão) ──────────────────────────────────────── */
:root {
  /* Marca */
  --primary:       #0D47A1;
  --primary-strong:#0A3A85;
  --accent:        #7C3AED;
  --gradient: linear-gradient(135deg, #0D47A1 0%, #7C3AED 50%, #22C55E 100%);

  /* Superfícies + texto */
  --bg:          #f4f7fb;
  --surface:     #ffffff;
  --card:        #ffffff;
  --border:      #e3e9f2;
  --text:        #122c4d;
  --muted:       #5b6b82;
  --green:       #16a34a;
  --red:         #dc2626;
  --amber:       #d97706;
  --radius:      14px;
  --radius-sm:   8px;

  /* Aliases legados → herdam a marca Velen (resolvem no uso) */
  --violet:       var(--primary);
  --violet-light: var(--accent);
  --violet-dim:   #7c3aed14;
}

/* ─── Tema escuro (petróleo) ───────────────────────────────────── */
/* Aplicado manualmente via [data-theme="dark"] e como fallback do SO
   antes do JS resolver. --violet/--violet-light são var() e re-resolvem
   sozinhos; só os literais precisam ser redefinidos aqui. */
:root[data-theme="dark"] {
  --primary:  #3b82f6;
  --accent:   #a78bfa;
  --bg:       #0a1a2e;
  --surface:  #102540;
  --card:     #13294b;
  --border:   #1e3a5f;
  --text:     #eaf1fb;
  --muted:    #8fa3bf;
  --green:    #34d399;
  --red:      #f87171;
  --amber:    #fbbf24;
  --violet-dim: #7c3aed2a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:  #3b82f6;
    --accent:   #a78bfa;
    --bg:       #0a1a2e;
    --surface:  #102540;
    --card:     #13294b;
    --border:   #1e3a5f;
    --text:     #eaf1fb;
    --muted:    #8fa3bf;
    --green:    #34d399;
    --red:      #f87171;
    --amber:    #fbbf24;
    --violet-dim: #7c3aed2a;
  }
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}