/* ============================================================
   A&7 · Simulador de ROI em Automação — Design Tokens & Temas
   Paleta adaptada p/ público de automação/ROI (empresários, PMEs):
   violeta A&7 (tecnologia/automação) + magenta (marca) + teal/verde
   (dinheiro/economia) + âmbar (payback/alerta). Marca A&7 mantida.
   Mobile-first · CSS puro · sem frameworks
   ============================================================ */

:root {
  /* ---- Marca (fixos nos dois temas) ---- */
  --violet: #6b32ff;        /* primário — automação / marca A&7 */
  --violet-2: #934cff;
  --magenta: #ff2ec8;       /* accent da marca (logo) */
  --blue: #315cff;          /* secundário (gradientes) */
  --teal: #15c3a0;          /* dinheiro / economia */
  --green: #2fd59f;         /* payback positivo / economia */
  --amber: #ffb02e;         /* payback / alerta / sensibilidade */
  --red: #ff5470;           /* custo / retrabalho / risco */

  /* ---- Forma / métricas ---- */
  --radius: 28px;
  --radius-sm: 18px;
  --radius-xs: 12px;
  --max: 1180px;
  --header-h: 68px;
  --gap: 24px;

  /* ---- Tipografia ---- */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Sombras ---- */
  --shadow: 0 24px 80px rgba(9, 13, 26, .16);
  --shadow-sm: 0 10px 30px rgba(9, 13, 26, .12);
}

/* ============ TEMA CLARO (padrão) ============ */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f5fb;
  --surface: #ffffff;
  --surface-2: #f0eefa;
  --surface-3: #e7e4f6;
  --ink: #140c26;
  --muted: #6d6780;
  --line: rgba(20, 12, 38, .11);
  --line-strong: rgba(20, 12, 38, .2);
  --header-bg: rgba(255, 255, 255, .86);
  --header-ink: #140c26;
  --hero-bg-1: #fbfaff;
  --hero-bg-2: #f1eefb;
  --grid-line: rgba(20, 12, 38, .045);
  --tool-bg: rgba(255, 255, 255, .94);
  --tool-border: rgba(20, 12, 38, .08);
  --badge-ok-bg: rgba(21, 195, 160, .15);
  --badge-ok-ink: #0c8f70;
  --badge-warn-bg: rgba(255, 176, 46, .18);
  --badge-warn-ink: #a86600;
  --badge-danger-bg: rgba(255, 84, 112, .14);
  --badge-danger-ink: #d63b57;
  --badge-info-bg: rgba(107, 50, 255, .14);
  --badge-info-ink: #5b21d6;
  --glow: rgba(107, 50, 255, .24);
  --glow-teal: rgba(21, 195, 160, .28);
  --code-bg: #140c26;
  --code-ink: #ece6fb;
  --dark: #170f30;
  --dark-2: #0e0822;
}

/* ============ TEMA ESCURO ============ */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0916;
  --surface: #151126;
  --surface-2: #1e1932;
  --surface-3: #282244;
  --ink: #f4f1fd;
  --muted: #a49dc0;
  --line: rgba(244, 241, 253, .11);
  --line-strong: rgba(244, 241, 253, .22);
  --header-bg: rgba(11, 9, 22, .88);
  --header-ink: #ffffff;
  --hero-bg-1: #0e0b1d;
  --hero-bg-2: #110d24;
  --grid-line: rgba(244, 241, 253, .05);
  --tool-bg: rgba(21, 17, 38, .94);
  --tool-border: rgba(244, 241, 253, .09);
  --badge-ok-bg: rgba(47, 213, 159, .16);
  --badge-ok-ink: #4fe0ae;
  --badge-warn-bg: rgba(255, 176, 46, .16);
  --badge-warn-ink: #ffc25e;
  --badge-danger-bg: rgba(255, 84, 112, .16);
  --badge-danger-ink: #ff7d92;
  --badge-info-bg: rgba(107, 50, 255, .18);
  --badge-info-ink: #c4a6ff;
  --glow: rgba(107, 50, 255, .32);
  --glow-teal: rgba(21, 195, 160, .34);
  --code-bg: #0b0916;
  --code-ink: #e6dffb;
  --dark: #170f30;
  --dark-2: #0e0822;
}