/* Genesis Media · Escuela PMD · tokens.css
 *
 * Branding extraído de la identidad viva del cliente (Tally form styles +
 * web escuelaprojectmanagerdigital.com): navy #343657 + teal #4ca5a0, Raleway.
 */

:root {
  /* ─── Brand colors ────────────────────────────────────────────── */
  --brand-primary: #4ca5a0;       /* CTA principal, acentos fuertes (teal PMD) */
  --brand-secondary: #343657;     /* CTA hover, headlines, links (navy PMD) */
  --brand-accent: #4ca5a0;        /* destacados, badges, micro-detalles */

  /* ─── Surfaces ────────────────────────────────────────────────── */
  --surface-dark: #343657;        /* fondo hero / sección dark (NO #000) */
  --surface-light: #f7f8fb;       /* fondo sección light (NO #FFF) */
  --surface-warm: #eef6f5;        /* fondo sección cálido / cards (teal suave) */
  --surface-cream: #f4f3ee;       /* fondo papel / variante neutral */

  /* ─── Text ────────────────────────────────────────────────────── */
  --text-on-dark: #f2f3f8;        /* texto sobre fondo dark */
  --text-on-light: #343657;       /* texto sobre fondo light */
  --text-muted: #6d7089;          /* texto secundario, captions */

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

  /* ─── Typography ──────────────────────────────────────────────── */
  --font-display: 'Raleway', system-ui, sans-serif;
  --font-body: 'Raleway', system-ui, sans-serif;
  --font-script: 'Raleway', system-ui, sans-serif; /* sin script en este branding */

  /* ─── 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 (NUNCA sin sombra en interactivos) ──────────────── */
  --shadow-card: 0 10px 40px rgba(52, 54, 87, 0.12), 0 0 20px rgba(52, 54, 87, 0.05);
  --shadow-cta: 0 4px 18px rgba(76, 165, 160, 0.28), 0 0 30px rgba(76, 165, 160, 0.10);
  --shadow-cta-hover: 0 8px 32px rgba(76, 165, 160, 0.38), 0 0 40px rgba(76, 165, 160, 0.18);

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