/*
 * Tokens del design system de eXRcise.
 *
 * Origen: __eXRcise website design__/design_handoff_exrcise_wordpress/
 *         _ds/exrcise-design-system-.../tokens/{colors,spacing,typography}.css
 *
 * IMPORTANTE — no "arreglar" la escala tipográfica:
 * el design system define unos --fs-* y las páginas del prototipo los PISAN con
 * una escala fluida mobile-first propia (ver bloque 3). La escala de las páginas
 * es la que manda y es la que se reproduce aquí. Además añade 8 variables que no
 * existen en el design system (--fs-section-xl, --fs-card-sm, --fs-body-xl,
 * --fs-button, --fs-micro, --fs-stat-lg, --fs-stat-sm, --fs-stat-xl).
 */

:root {
  /* ---------- 1. Color (tokens/colors.css, literal) ---------- */
  --coral: #EB5160;
  --coral-hover: #D94455;
  --coral-pressed: #C93A4B;
  --coral-bg-light: #FCE8EA;
  --coral-border-soft: #F3A9B0;
  --coral-focus-ring: rgba(235, 81, 96, 0.18);

  --navy: #071B3A;

  --bg-page: #FBF8F7;
  --bg-blush: #FDF0F1;
  --surface-white: #FFFFFF;
  --surface-neutral: #F7F5F4;
  --border-neutral: #E9E3E3;

  --text-primary: #071B3A;
  --text-secondary: #596879;
  --text-muted: #8B949E;
  --text-disabled: #B9BDC3;

  --sand-warm: #E8C89F;
  --sand-light: #F6E5CE;
  --sage: #91AD9D;
  --sage-soft: #C7D8CD;

  --gold-reward: #D4A23A;
  --success: #3AB77D;
  --warning: #EAAA3B;
  --error: #D94352;
  --inactive: #D7D9DD;

  --gradient-brand-start: #EB5160;
  --gradient-brand-end: #F4A08F;

  /* Sombras: siempre tintadas de navy, nunca negro puro */
  --shadow-card: 0 8px 24px rgba(7, 27, 58, 0.045);
  --shadow-feature: 0 14px 40px rgba(7, 27, 58, 0.065);
  --shadow-hover: 0 16px 42px rgba(7, 27, 58, 0.09);
  --shadow-btn-hover: 0 8px 20px rgba(235, 81, 96, 0.25);

  /* ---------- 2. Espaciado, contenedores y radios (tokens/spacing.css) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-20: 80px;
  --sp-24: 96px;

  --container-max: 1240px;
  --container-wide: 1360px;
  --container-text: 720px;
  --container-hero-copy: 600px;

  --radius-badge: 8px;
  --radius-input: 12px;
  --radius-card: 20px;
  --radius-feature: 24px;
  --radius-hero: 30px;
  --radius-pill: 9999px;

  /* ---------- 3. Tipografía ---------- */
  /* Familias e interlineados (tokens/typography.css) */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --lh-hero: 1.08;
  --lh-section: 1.16;
  --lh-card: 1.25;
  --lh-body: 1.6;
  --lh-small: 1.5;

  /* Escala fluida mobile-first de las páginas del prototipo.
     Esta es la que manda (pisa los --fs-* del design system). */
  --fs-hero: clamp(2.125rem, 5vw, 4.25rem);          /* H1 — 34px → 68px */
  --fs-section-lg: clamp(1.75rem, 3.2vw, 2.875rem);  /* H2 de sección — 28px → 46px */
  --fs-section-xl: clamp(2rem, 3.68vw, 3.3125rem);   /* H2 con énfasis (recompensas) — 32px → 53px */
  --fs-card-lg: clamp(1.125rem, 2vw, 1.625rem);      /* título de tarjeta destacada — 18px → 26px */
  --fs-card: clamp(1.125rem, 1.6vw, 1.375rem);       /* título de tarjeta estándar — 18px → 22px */
  --fs-card-sm: 0.9375rem;                            /* título compacto — 15px */
  --fs-subhead: clamp(1.0625rem, 1.5vw, 1.3125rem);  /* subtítulo — 17px → 21px */
  --fs-body-xl: clamp(1.125rem, 1.5vw, 1.3rem);      /* párrafo destacado — 18px → 20.8px */
  --fs-body-lg: 1.125rem;                             /* párrafo principal — 18px */
  --fs-body: 1rem;                                    /* cuerpo / UI — 16px */
  --fs-small: 0.875rem;                               /* texto secundario — 14px */
  --fs-caption: 0.8125rem;                            /* eyebrow / caption — 13px */
  --fs-button: 0.9375rem;                             /* botón terciario / enlace de nav — 15px */
  --fs-micro: clamp(0.75rem, 1vw, 0.8125rem);        /* etiquetas auxiliares — 12px → 13px */
  --fs-stat-lg: clamp(1.375rem, 2.5vw, 2rem);        /* cifra de progreso grande — 22px → 32px */
  --fs-stat-sm: clamp(0.8125rem, 1.4vw, 1.125rem);   /* sufijo de cifra — 13px → 18px */
  --fs-stat-xl: clamp(1.75rem, 3.1vw, 2.75rem);      /* cifra destacada única (86%) — 28px → 44px */

  /* ---------- 4. Layout propio del tema ---------- */
  /* Offset del header fijo, usado por el scroll suave con anclas */
  --header-offset: 76px;
}