/* Genesis Media · Vincurando · tokens.css
 * Branding extraído de vincurando.com (theme Kajabi vivo, 2026-07-24):
 * tinta #2d3031 · topo del logo #97867C · dorado CTA #f1c40f (su sales page viva)
 * Raleway (display) + Roboto (body) — las de su web.
 */

:root {
  /* ─── Brand colors ────────────────────────────────────────────── */
  --brand-primary: #2d3031;       /* tinta Vincurando — headlines, texto fuerte */
  --brand-secondary: #97867C;     /* topo del logo — eyebrows, detalles, hover */
  --brand-accent: #f1c40f;        /* dorado CTA (el de su web viva) */

  /* ─── Surfaces ────────────────────────────────────────────────── */
  --surface-dark: #2d3031;        /* sección dark */
  --surface-light: #fdfcfa;       /* fondo base cálido (no #FFF puro) */
  --surface-warm: #f3ede6;        /* sección alterna cálida */
  --surface-cream: #faf7f2;       /* crema — fondo del bloque VSL */

  /* ─── Text ────────────────────────────────────────────────────── */
  --text-on-dark: #f4f2ef;
  --text-on-light: #2d3031;
  --text-muted: #6f6862;

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

  /* ─── Typography ──────────────────────────────────────────────── */
  --font-display: 'Raleway', Georgia, sans-serif;
  --font-body: 'Roboto', system-ui, sans-serif;
  --font-script: 'Raleway', cursive; /* sin script en el branding — fallback display */

  /* ─── Scale (mobile-first con clamp) ──────────────────────────── */
  --fs-h1: clamp(1.6rem, 5.4vw, 2.35rem);   /* VSL-page: H1 contenido, el vídeo manda */
  --fs-h2: clamp(1.5rem, 5vw, 2.15rem);
  --fs-h3: clamp(1.2rem, 3.8vw, 1.55rem);
  --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(45, 48, 49, 0.12), 0 0 20px rgba(45, 48, 49, 0.04);
  --shadow-cta: 0 4px 18px rgba(45, 48, 49, 0.18), 0 0 30px rgba(241, 196, 15, 0.18);
  --shadow-cta-hover: 0 8px 32px rgba(45, 48, 49, 0.26), 0 0 40px rgba(241, 196, 15, 0.28);

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