/* ==========================================================
   variables.css — Tokens de design (fácil personalização)
   Altere aqui cores, espaçamentos, raios e transições.
   ========================================================== */

:root {
  /* Tipografia */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-pixel: 'Press Start 2P', monospace;

  /* Escala */
  --fs-xs: 0.8rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2.25rem;
  --fs-2xl: 3.5rem;
  --fs-3xl: 5rem;

  /* Espaçamentos */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 5rem;
  --sp-7: 7rem;

  /* Bordas */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* Transições */
  --t-fast: 160ms ease;
  --t-med: 320ms cubic-bezier(.2,.7,.2,1);
  --t-slow: 600ms cubic-bezier(.2,.7,.2,1);

  /* Container */
  --container: 1200px;

  /* Cores da marca */
  --brand: #7c5cff;
  --brand-2: #22d3ee;
  --accent: #f5d90a;
}

/* ---------- TEMA DARK (padrão) ---------- */
[data-theme='dark'] {
  --bg: #0a0a0b;
  --bg-elev: #111114;
  --bg-alt: #0f0f12;
  --surface: #16161a;
  --text: #f5f5f7;
  --text-muted: #9a9aa4;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);
  --shadow: 0 20px 60px rgba(0, 0, 0, .5);
  --overlay: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85));
  --grid-color: rgba(255,255,255,.05);
}

/* ---------- TEMA LIGHT ---------- */
[data-theme='light'] {
  --bg: #f7f7f8;
  --bg-elev: #ffffff;
  --bg-alt: #eeeef1;
  --surface: #ffffff;
  --text: #0a0a0b;
  --text-muted: #55555f;
  --border: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.2);
  --shadow: 0 20px 60px rgba(0, 0, 0, .08);
  --overlay: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.7));
  --grid-color: rgba(0,0,0,.05);
}