/**
 * variables.css
 * ──────────────────────────────────────────────
 * Fonte única da verdade para tokens visuais.
 * Nenhuma cor, espaçamento ou duração deve ser
 * escrita "a mão" em outro arquivo CSS — sempre
 * referencie uma variável definida aqui.
 */

:root {
  /* ── Paleta por etapa ─────────────────────── */
  --stage-1: #4F7CFF; /* Quem você realmente é */
  --stage-2: #39C46A; /* Memórias */
  --stage-3: #F39C12; /* Valores */
  --stage-4: #8E44AD; /* Vulnerabilidade */
  --stage-5: #FF5A87; /* Conexão */
  --stage-6: #16213E; /* Intimidade */

  /* ── Cor ativa (trocada dinamicamente via theme.js) ── */
  --accent: var(--stage-1);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 8%, transparent);

  /* ── Base neutra ──────────────────────────── */
  --bg: #05060a;
  --bg-elevated: #0a0c12;
  --ink: #f5f6fa;
  --ink-dim: rgba(245, 246, 250, 0.62);
  --ink-faint: rgba(245, 246, 250, 0.34);
  --hairline: rgba(245, 246, 250, 0.08);

  /* ── Tipografia ───────────────────────────── */
  --font-display: "Manrope", -apple-system, "SF Pro Display", sans-serif;
  --font-body: "Manrope", -apple-system, "SF Pro Text", sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-question: clamp(1.5rem, 4.6vw, 2.4rem);
  --fs-question-lg: clamp(1.9rem, 5.4vw, 3.1rem);
  --fs-turn: 0.9375rem;
  --fs-caption: 0.75rem;

  /* ── Espaçamento — tudo respira ───────────── */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;

  /* ── Timing — nada rápido, tudo suave ─────── */
  --dur-fast: 600ms;
  --dur-base: 750ms;
  --dur-slow: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Camadas ──────────────────────────────── */
  --z-particles: 1;
  --z-content: 10;
  --z-chrome: 20;
  --z-transition: 30;
  --z-wipe: 35;
  --z-splash: 40;
}