/* Genesis Media · Landing template · tokens.css
 *
 * Variables CSS por cliente. Branding YMK aplicado (doc de marca Drive + Astra globals web viva, 14/07/2026)
 * (extraído del Drive del cliente — colores, fuentes, radius). El resto del
 * sistema (site.css) consume estas variables — NO tocar el sistema, solo
 * los tokens.
 */

:root {
  /* ─── Brand colors ────────────────────────────────────────────── */
  --brand-primary: #ff9e1b;       /* CTA principal, acentos fuertes */
  --brand-secondary: #07272d;   /* CTA hover, headlines, links */
  --brand-accent: #26d07c;         /* destacados, badges, micro-detalles */

  /* ─── Surfaces ────────────────────────────────────────────────── */
  --surface-dark: #07272d;         /* fondo hero / sección dark (NO #000) */
  --surface-light: #f9f9f9;       /* fondo sección light (NO #FFF) */
  --surface-warm: #ffeedb;         /* fondo sección cálido / cards */
  --surface-cream: #e2f8e9;       /* fondo papel / variante neutral */

  /* ─── Text ────────────────────────────────────────────────────── */
  --text-on-dark: #f2faf6;         /* texto sobre fondo dark (≈ #f0f0f5) */
  --text-on-light: #07272d;       /* texto sobre fondo light (≈ #1a1a1f) */
  --text-muted: #55686c;             /* texto secundario, captions */

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

  /* ─── Typography ──────────────────────────────────────────────── */
  --font-display: 'Quicksand', 'Trebuchet MS', sans-serif;    /* H1-H3 — serif / display */
  --font-body: 'Quicksand', system-ui, sans-serif;   /* body — sans-serif */
  --font-script: 'Quicksand', system-ui, sans-serif;             /* opcional — script/handwritten */

  /* ─── 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);    /* padding-block de cada section */
  --section-gap: clamp(4rem, 11vw, 7.5rem);     /* margin entre secciones grandes */
  --container-max: 1140px;                       /* grids */
  --container-text: 740px;                       /* párrafos largos */

  /* ─── Radius ──────────────────────────────────────────────────── */
  --radius-card: 1.25rem;
  --radius-input: 0.625rem;
  --radius-pill: 999px;                          /* CTAs pill — Genesis canónico */

  /* ─── Shadows (NUNCA sin sombra en interactivos) ──────────────── */
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 0, 0, 0.05);
  --shadow-cta: 0 4px 18px rgba(0, 0, 0, 0.18), 0 0 30px rgba(0, 0, 0, 0.08);
  --shadow-cta-hover: 0 8px 32px rgba(0, 0, 0, 0.28), 0 0 40px rgba(0, 0, 0, 0.15);

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

/* Si el cliente NO usa una de las fuentes secundarias, dejar
 * el fallback funcional comentando la @font-face correspondiente
 * en shared/css/site.css (sección @font-face). */