/* Sandra Suárez · Vision Board Workshop · tokens.css
 * Branding inferido del strategic-brief + voice profile + akahealing.com
 * Paleta: crema (fondo) + granate oscuro (texto) + violeta (acento Sandra 🟣)
 * Display: Quintessential (self-host woff2)
 * Body: system-ui (sin Google Fonts)
 */

:root {
  /* ─── Brand colors ────────────────────────────────────────────── */
  --brand-primary: #6B3FA0;          /* violeta Sandra (acento principal / CTA) */
  --brand-secondary: #4A2A6F;        /* violeta oscuro (CTA hover, headlines) */
  --brand-accent: #C9A961;           /* dorado suave (badges, separadores místicos) */

  /* ─── Surfaces ────────────────────────────────────────────────── */
  --surface-dark: #2A1B3D;           /* violeta profundo (hero / sección dark) */
  --surface-light: #FAF5EE;          /* crema cálido (fondo principal) */
  --surface-warm: #F2E8D8;           /* crema más cálido (cards / dolor block) */
  --surface-cream: #EFE4D2;          /* crema acentuado (qué incluye block) */

  /* ─── Text ────────────────────────────────────────────────────── */
  --text-on-dark: #F5EFE3;           /* crema sobre violeta dark */
  --text-on-light: #2B1E2F;          /* granate-violeta sobre crema */
  --text-muted: #6B5A6F;             /* muted granate */

  /* ─── Functional ──────────────────────────────────────────────── */
  --success: #1f9d55;
  --error: #c53030;
  --warning: #c08a00;

  /* ─── Typography ──────────────────────────────────────────────── */
  /* Hanken Grotesk para TODO (display + body) — coherente con referencia bluehackers/Razzetti */
  /* Quintessential queda como font-script para acentos puntuales (cuando se necesita ornamento mystic) */
  --font-display: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Quintessential', Georgia, serif;

  /* ─── Scale (mobile-first con clamp) ──────────────────────────── */
  --fs-h1: clamp(2rem, 7.5vw, 3.5rem);
  --fs-h2: clamp(1.625rem, 5.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 4vw, 1.75rem);
  --fs-body: clamp(1rem, 2.4vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* ─── Spacing ─────────────────────────────────────────────────── */
  --section-py: clamp(3.5rem, 9vw, 6.25rem);
  --section-gap: clamp(4rem, 11vw, 7.5rem);
  --container-max: 1140px;
  --container-text: 740px;

  /* ─── Radius ──────────────────────────────────────────────────── */
  --radius-card: 1.25rem;
  --radius-input: 0.625rem;
  --radius-pill: 999px;

  /* ─── Shadows ─────────────────────────────────────────────────── */
  --shadow-card: 0 10px 40px rgba(74, 42, 111, 0.12), 0 0 20px rgba(74, 42, 111, 0.05);
  --shadow-cta: 0 4px 18px rgba(107, 63, 160, 0.35), 0 0 30px rgba(107, 63, 160, 0.15);
  --shadow-cta-hover: 0 8px 32px rgba(107, 63, 160, 0.45), 0 0 40px rgba(107, 63, 160, 0.25);

  /* ─── Motion ──────────────────────────────────────────────────── */
  --ease-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-quick: 0.18s;
  --t-base: 0.32s;
  --t-slow: 0.5s;
}