/* ==========================================================================
   tokens.css — única fuente de verdad de color, tipografía y espaciado.
   Portado del design system del diseñador (design-source/design-system.js).
   Ningún componente debe hardcodear un valor que exista aquí.
   ========================================================================== */

:root {
  /* --- Marca. Pantone-matched, de la hoja de color oficial ------------- */
  --bfc-azul: #4296B4;            /* Pantone 7459 C — azul principal      */
  --bfc-azul-profundo: #0057C9;   /* Pantone 3005 C — solo botones        */
  --bfc-gris-azul: #B9C8D3;       /* Pantone 5445 C — gris azulado        */
  --bfc-turquesa: #8AD2E6;        /* Pantone 636 C  — turquesa claro      */
  --bfc-marfil: #F7F4EE;          /* fondo base                           */
  --bfc-blanco: #FFFFFF;
  --bfc-tinta: #1B2B33;           /* texto principal                      */
  --bfc-suave: #5C6E77;           /* texto secundario                     */

  /* --- Tintes y sombras derivados usados en el mockup ------------------ */
  --bfc-azul-oscuro: #215D75;
  --bfc-azul-profundo-nocturno: #173F54;
  --bfc-turquesa-claro: #7CC6DE;
  --bfc-marfil-alto: #FCFBF7;
  --bfc-marfil-bajo: #F1ECE3;
  --bfc-tinta-tenue: #8496A0;     /* cédulas, contador de pasos, footer   */

  /* --- Rampas alfa: bordes, lavados, glows ----------------------------- */
  --bfc-azul-a12: rgba(66, 150, 180, .12);
  --bfc-azul-a22: rgba(66, 150, 180, .22);
  --bfc-azul-a50: rgba(66, 150, 180, .5);
  --bfc-turquesa-a14: rgba(138, 210, 230, .14);
  --bfc-turquesa-a24: rgba(138, 210, 230, .24);
  --bfc-turquesa-a28: rgba(138, 210, 230, .28);
  --bfc-turquesa-a62: rgba(138, 210, 230, .62);
  --bfc-gris-a40: rgba(185, 200, 211, .4);
  --bfc-gris-a55: rgba(185, 200, 211, .55);
  --bfc-gris-a60: rgba(185, 200, 211, .6);
  --bfc-gris-a70: rgba(185, 200, 211, .7);
  --bfc-tinta-a22: rgba(27, 43, 51, .22);
  --bfc-tinta-a42: rgba(27, 43, 51, .42);

  /* --- Alias semánticos. Usa ESTOS en los componentes, no los de arriba - */
  --surface-page: var(--bfc-marfil);
  --surface-card: var(--bfc-blanco);
  --surface-sunken: var(--bfc-marfil);
  --surface-glass: rgba(255, 255, 255, .55);
  --surface-selected: linear-gradient(180deg, var(--bfc-turquesa-a24), var(--bfc-turquesa-a14));
  --surface-inverse: linear-gradient(150deg, var(--bfc-azul-profundo-nocturno), #3F8FAC 70%, #5AA9C4);

  --text-body: var(--bfc-tinta);
  --text-muted: var(--bfc-suave);
  --text-faint: var(--bfc-tinta-tenue);
  --text-accent: var(--bfc-azul);
  --text-on-inverse: var(--bfc-blanco);
  --text-on-inverse-muted: rgba(255, 255, 255, .85);

  --border-subtle: var(--bfc-gris-a55);
  --border-field: var(--bfc-gris-a70);
  --border-active: var(--bfc-azul);
  --border-glass: rgba(255, 255, 255, .75);
  --border-card: rgba(255, 255, 255, .85);

  --action-primary: var(--bfc-azul-profundo);
  --action-primary-text: var(--bfc-blanco);
  --action-accent: var(--bfc-azul);
  --state-active-wash: var(--bfc-turquesa);
  --state-inactive: var(--bfc-gris-azul);

  /* Estados de error del formulario. No venían en el diseño: añadidos
     con la paleta de marca para no romper el tono cálido de la página. */
  --state-error: #B3402F;
  --state-error-soft: rgba(179, 64, 47, .08);

  --link: var(--bfc-azul);
  --link-hover: var(--bfc-azul-profundo);

  /* --- Tipografía ------------------------------------------------------ */
  --font-display: 'Manrope', system-ui, sans-serif;          /* titulares, botones, etiquetas */
  --font-serif: 'Cormorant Garamond', Georgia, serif;        /* frases emocionales */
  --font-body: 'Inter', system-ui, sans-serif;               /* cuerpo */

  --fw-body: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Escala mobile-first de la columna de 540px */
  --fs-serif-hero: 34px;
  --fs-serif-closing: 29px;
  --fs-quote: 21px;
  --fs-h2: 21px;
  --fs-h3: 20px;
  --fs-label: 16px;
  --fs-cta: 15px;
  --fs-body: 14.5px;
  --fs-option: 14px;
  --fs-small: 13px;
  --fs-micro: 12px;
  --fs-caption: 11.5px;
  --fs-eyebrow: 11px;

  --lh-serif: 1.14;
  --lh-heading: 1.12;
  --lh-body: 1.6;

  --ls-tight: -.02em;
  --ls-eyebrow: .24em;

  /* --- Espaciado ------------------------------------------------------- */
  --space-1: 4px;   --space-2: 6px;   --space-3: 8px;   --space-4: 10px;
  --space-5: 12px;  --space-6: 14px;  --space-7: 16px;  --space-8: 18px;
  --space-9: 22px;  --space-10: 24px; --space-12: 30px; --space-14: 38px;
  --space-16: 44px; --space-20: 60px;

  --gap-options: 12px;   /* separación entre tarjetas de opción */
  --gap-section: 44px;   /* aire entre secciones */
  --page-max: 540px;     /* ancho de la columna mobile-first */
  --page-pad-x: 18px;
  --tap-min: 52px;       /* alto mínimo de cualquier zona táctil */

  /* --- Radios y sombras ------------------------------------------------ */
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 22px;
  --radius-3xl: 24px;
  --radius-frame: 26px;
  --radius-pill: 20px;
  --radius-full: 50%;

  --shadow-strong: 0 22px 60px -28px rgba(27, 43, 51, .42);
  --shadow-soft: 0 12px 34px -20px rgba(27, 43, 51, .3);
  --shadow-option: 0 4px 14px -8px rgba(27, 43, 51, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
  --shadow-option-hover: 0 10px 24px -12px rgba(66, 150, 180, .5);
  --shadow-option-selected: 0 12px 26px -12px rgba(66, 150, 180, .55);
  --shadow-cta: 0 14px 30px -14px rgba(0, 87, 201, .6);
  --shadow-play: 0 14px 32px -8px rgba(0, 87, 201, .6);
  --shadow-icon-selected: 0 6px 14px -6px rgba(66, 150, 180, .7);

  --blur-glass: blur(6px);
  --blur-glow: blur(60px);

  /* --- Fondos compuestos ----------------------------------------------- */
  --bg-page:
    radial-gradient(75% 45% at 50% -6%, rgba(138, 210, 230, .62), transparent 60%),
    radial-gradient(55% 45% at 96% 22%, rgba(66, 150, 180, .22), transparent 58%),
    radial-gradient(60% 45% at 4% 55%, rgba(138, 210, 230, .24), transparent 60%),
    radial-gradient(70% 55% at 50% 108%, rgba(0, 87, 201, .1), transparent 60%),
    linear-gradient(180deg, #FCFBF7, #F1ECE3);
  --bg-option: linear-gradient(180deg, #FFFFFF, #FBFAF7);
  --bg-icon-tile: linear-gradient(160deg, rgba(138, 210, 230, .28), rgba(66, 150, 180, .12));
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  --grain-opacity: .45;

  --stroke-icon: 1.7px;   /* grosor de trazo del set de iconos */
  --stroke-check: 3.5px;

  /* --- Movimiento ------------------------------------------------------ */
  --ease-default: ease;
  --dur-fast: .12s;       /* press */
  --dur-base: .2s;        /* hover, color, borde */
  --dur-slide: .35s;      /* transición entre preguntas */
  --dur-progress: .4s;
  --dur-draw: .7s;        /* trazo del check de gracias */
  --lift-hover: -1px;
  --scale-press: .99;
  --scale-play-hover: 1.06;
}

/* Respeta la preferencia del sistema. El diseño original no lo contemplaba;
   sin esto la deriva del fondo y las entradas animadas son un problema de
   accesibilidad real (vestibular). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0s;
    --dur-base: 0s;
    --dur-slide: 0s;
    --dur-progress: 0s;
    --dur-draw: 0s;
    --lift-hover: 0px;
    --scale-play-hover: 1;
  }
}