/* Genesis Media · Landing template · tokens.css
 *
 * Cliente: María de Lluc — Taller de pago «Verano Sin Culpa» (29-30 jun 2026)
 * Branding extraído de clients/maria-de-lluc/brain/06-branding.md
 * (editorial femenino premium · neutros cálidos + taupe · Fraunces/Mulish).
 */

:root {
  /* ─── Brand colors ────────────────────────────────────────────── */
  --brand-primary: #222423;        /* CTA principal (dark) + secciones oscuras */
  --brand-secondary: #3a3a3c;      /* CTA hover, headlines fuertes, links */
  --brand-accent: #C2A878;         /* taupe dorado — destacados, italic gold del hero */

  /* ─── Surfaces ────────────────────────────────────────────────── */
  --surface-dark: #222423;         /* fondo hero / sección dark */
  --surface-light: #ffffff;        /* fondo sección light */
  --surface-warm: #f5f4f2;         /* bandas alternas, secciones cálidas, cards */
  --surface-cream: #faf8f5;        /* papel cremoso, variante neutral */

  /* ─── Text ────────────────────────────────────────────────────── */
  --text-on-dark: #f5f4f2;         /* texto sobre fondo dark */
  --text-on-light: #222423;        /* texto sobre fondo light */
  --text-muted: #6e6e6e;           /* texto secundario, captions */

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

  /* ─── Typography ──────────────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;        /* H1-H3 — serif editorial */
  --font-body: 'Mulish', system-ui, sans-serif;      /* body / CTA / eyebrow — sans humanista */
  --font-script: 'Fraunces', cursive;                /* acentos en italic (no script real) */

  /* ─── Scale (mobile-first con clamp) ──────────────────────────── */
  --fs-h1: clamp(1.9rem, 7vw, 3.4rem);
  --fs-h2: clamp(1.6rem, 5.5vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 4vw, 1.7rem);
  --fs-body: clamp(1.02rem, 2.4vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.72rem;

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

  /* ─── Radius ──────────────────────────────────────────────────── */
  --radius-card: 1.1rem;
  --radius-input: 0.625rem;
  --radius-pill: 100px;             /* CTAs pill — branding María de Lluc */

  /* ─── Shadows (suaves multilayer · editorial premium) ─────────── */
  --shadow-card: 0 10px 40px rgba(34, 36, 35, 0.08), 0 0 30px rgba(34, 36, 35, 0.04);
  --shadow-cta: 0 10px 30px rgba(34, 36, 35, 0.25);
  --shadow-cta-hover: 0 16px 40px rgba(34, 36, 35, 0.32);

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