/* =========================================================================
   Repofloran Quiz · Design Tokens
   -------------------------------------------------------------------------
   Fuente de verdad de color, tipografía, espacio, radios, sombras y motion.
   Todo componente consume variables de este archivo. Ningún valor literal
   de color, tamaño de fuente o duración debe aparecer en otro CSS.

   Colores extraídos pixel a pixel de logos/*.png y del PDF de propuesta.
   Ratios de contraste WCAG 2.1 verificados — ver design/palette.json.

   Cargar SIEMPRE primero:
     <link rel="stylesheet" href="/assets/css/tokens.css">
   ========================================================================= */

:root {
  /* =====================================================================
     1. COLOR · Escala teal (marca Repofloran)
     ===================================================================== */
  --teal-50:  #E6F7F7;
  --teal-100: #C2EDED;
  --teal-200: #8CCECE;   /* brand — capa clara del isotipo   */
  --teal-300: #4BBCBC;   /* brand — capa media del isotipo   */
  --teal-400: #14B0B1;
  --teal-500: #00ABAC;   /* BRAND — isotipo Repofloran       */
  --teal-600: #0F9494;   /* brand — logo genérico            */
  --teal-700: #0C7A7A;
  --teal-800: #0A5F5F;
  --teal-900: #084848;
  --teal-950: #042E2E;

  /* 2. COLOR · Neutrales (derivados del gris del wordmark "Repo") */
  --ink-50:  #F8FAFA;
  --ink-100: #F1F4F3;
  --ink-200: #E2E6E5;
  --ink-300: #C4CAC9;
  --ink-400: #9AA1A0;
  --ink-500: #6E7574;
  --ink-600: #585857;    /* brand — wordmark "Repo"          */
  --ink-700: #3D4747;
  --ink-800: #2B3333;
  --ink-900: #1A1F1F;
  --white:   #FFFFFF;

  /* 3. COLOR · Líneas de producto */
  --mujer-100: #FCE7F1;
  --mujer-200: #F1B7D5;
  --mujer-300: #EC9BC3;
  --mujer-400: #E672AA;
  --mujer-500: #E04190;  /* brand — badge MUJER              */
  --mujer-600: #C9327D;
  --mujer-700: #B32A6F;

  --defensas-100: #D9F2F2;
  --defensas-300: #61C0C1;
  --defensas-500: #00ABAC; /* brand — badge DEFENSAS         */
  --defensas-700: #0C7A7A;

  --estres-100: #EEF7E7;
  --estres-200: #CCE1B8;
  --estres-300: #BFDBA9;
  --estres-400: #A6CF89;
  --estres-500: #8BC269;  /* brand — badge SIN ESTRÉS         */
  --estres-700: #5F9440;

  /* 4. COLOR · Porta (agencia) — SOLO panel admin y crédito del footer */
  --porta-purple:     #522883;
  --porta-purple-600: #6B3AA0;
  --porta-orange:     #EE7B1C;
  --porta-orange-700: #B85A0F;
  --porta-cream:      #FDF1E9;
  --porta-amber:      #FBBF24;

  /* 5. COLOR · Semánticos
     El verde de acierto se desatura respecto al de Sin Estrés para que no
     se lea como "línea Sin Estrés". El rojo se creó nuevo: usar el magenta
     de la línea Mujer para "incorrecto" sería un error de marca. */
  --success-300: #A8DE7C;
  --success-500: #6FB043;
  --success-700: #3B6F1F;
  --success-bg:  #EEF7E7;

  --error-300: #FF9E9E;
  --error-500: #E05B5B;
  --error-600: #C93A3A;
  --error-700: #A32E2E;
  --error-bg:  #FDECEC;

  --warning-500: #FBBF24;
  --warning-700: #A16207;
  --warning-bg:  #FEF6E3;

  /* =====================================================================
     6. ROLES SEMÁNTICOS · Kiosco (tema oscuro, es el default del juego)
     Los componentes usan ESTOS, nunca la escala cruda. Así el panel admin
     puede redefinirlos en tema claro sin tocar un solo componente.
     ===================================================================== */
  --bg:              var(--teal-900);
  --bg-gradient:     radial-gradient(ellipse 120% 80% at 50% 0%,
                       #0C7A7A 0%, #084848 45%, #042E2E 100%);
  --surface:         var(--teal-800);
  --surface-raised:  var(--teal-700);
  --surface-sunken:  var(--teal-950);
  --border:          color-mix(in srgb, var(--teal-300) 40%, transparent);
  --border-strong:   var(--teal-300);

  --text:            var(--white);
  --text-secondary:  var(--teal-100);
  --text-tertiary:   var(--teal-200);
  --text-on-accent:  var(--ink-900);

  --accent:          var(--teal-500);
  --accent-hover:    var(--teal-400);
  --focus-ring:      var(--teal-200);

  /* =====================================================================
     7. TIPOGRAFÍA
     Poppins (geométrica, redonda, cercana al wordmark de Repofloran y a la
     tipografía de la propuesta de Porta) para títulos y respuestas.
     Inter para texto de UI, tablas y formularios: mejor legibilidad en
     tamaños chicos y números tabulares para el panel admin.
     AMBAS SE SIRVEN LOCALMENTE — el kiosco debe arrancar sin internet.
     ===================================================================== */
  /* La cola de emoji NO es decorativa: Poppins e Inter están subseteadas al
     español y no contienen ni un glifo de emoji, así que sin este fallback el
     "🎉" de settings.marca.mensaje_ganador se dibuja como un cuadrito (tofu)
     en la pantalla de victoria, frente al público. Verificado en captura. */
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol";
  --font-display: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif, var(--emoji);
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif, var(--emoji);
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace, var(--emoji);

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* Escala fluida. El mínimo sirve a un celular de 360px; el máximo, a la
     TV vertical de 1080px de ancho. clamp() cubre todo el rango intermedio
     sin un solo media query de tipografía.

     ⚠️ La pendiente de cada paso está calculada para que el MÁXIMO se alcance
     exactamente a 1080px de ancho, que es el target. Con una pendiente menor
     el paso se queda corto justo en la TV: --step-1 daba 27.6px a 1080px
     (medido en el navegador), por debajo del mínimo absoluto de 28px del
     kiosco, aunque docs/02-DESIGN-SYSTEM.md §3.2 lo documenta como "~30px".
     Si tocás una pendiente, verificá el valor real a 1080px, no el comentario. */
  --step--2: clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem);  /* 12 → 14 */
  --step--1: clamp(0.875rem, 0.80rem + 0.35vw, 1.0625rem);/* 14 → 17 */
  --step-0:  clamp(1rem, 0.90rem + 0.50vw, 1.375rem);     /* 16 → 22 */
  --step-1:  clamp(1.25rem, 1rem + 1.30vw, 1.875rem);     /* 20 → 30 */
  --step-2:  clamp(1.5rem, 1.20rem + 1.50vw, 2.5rem);     /* 24 → 40 */
  --step-3:  clamp(1.875rem, 1.40rem + 2.40vw, 3.5rem);   /* 30 → 56 */
  --step-4:  clamp(2.25rem, 1.50rem + 3.75vw, 4.5rem);    /* 36 → 72 */
  --step-5:  clamp(2.75rem, 1.60rem + 5.75vw, 6rem);      /* 44 → 96 */

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.06em;
  --ls-caps:   0.14em;   /* para los eyebrows en versalitas del PDF */

  /* =====================================================================
     8. ESPACIO · base 8px, con medios pasos donde hace falta
     ===================================================================== */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  2.5rem;    /* 40 */
  --space-8:  3rem;      /* 48 */
  --space-9:  4rem;      /* 64 */
  --space-10: 5rem;      /* 80 */
  --space-11: 6rem;      /* 96 */
  --space-12: 8rem;      /* 128 */

  /* Margen lateral seguro. En la TV vertical hay que respetar el bisel y
     el hecho de que nadie apunta con precisión a 3cm del borde. */
  --gutter: clamp(1rem, 4vw, 4rem);

  /* =====================================================================
     9. TAMAÑOS TOUCH
     El mínimo absoluto es 44px (WCAG 2.5.5 / Apple HIG). En una TV de 55"
     el dedo cae con mucho menos precisión que en un teléfono: los botones
     de respuesta se dimensionan por altura mínima, no por contenido.
     ===================================================================== */
  --touch-min:      44px;   /* jamás por debajo de esto, en ningún device */
  --touch-comfy:    64px;   /* controles secundarios del kiosco           */
  --touch-tv:       clamp(88px, 11vh, 180px);  /* botón de respuesta      */
  --touch-tv-cta:   clamp(72px, 9vh, 140px);   /* CTA principal           */
  --touch-gap:      clamp(1rem, 2.5vh, 2rem);  /* separación anti-error    */

  /* =====================================================================
     10. RADIOS
     El isotipo de Repofloran es un rectángulo de esquinas muy redondeadas.
     Los radios grandes de la UI son un eco deliberado de esa forma.
     ===================================================================== */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-xl:   32px;
  --radius-2xl:  44px;
  --radius-pill: 999px;

  /* =====================================================================
     11. SOMBRAS · teñidas de teal, nunca negro puro
     ===================================================================== */
  --shadow-sm: 0 2px 8px rgba(4, 46, 46, 0.24);
  --shadow-md: 0 8px 24px rgba(4, 46, 46, 0.32);
  --shadow-lg: 0 18px 48px rgba(4, 46, 46, 0.40);
  --shadow-xl: 0 32px 80px rgba(4, 46, 46, 0.48);
  --glow-accent:  0 0 0 6px color-mix(in srgb, var(--teal-500) 28%, transparent);
  --glow-success: 0 0 48px color-mix(in srgb, var(--success-500) 45%, transparent);
  --glow-error:   0 0 48px color-mix(in srgb, var(--error-500) 40%, transparent);

  /* =====================================================================
     12. MOTION
     Curvas con overshoot leve para que el kiosco se sienta vivo, pero
     duraciones cortas: el jugador está de pie y hay cola detrás.
     ===================================================================== */
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-normal:  260ms;
  --dur-slow:    420ms;
  --dur-slower:  700ms;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Tiempos de la máquina de estados del juego (ver docs/01-SPEC-FUNCIONAL.md).
     Están acá y no hardcodeados en JS para poder ajustarlos en el evento. */
  --t-feedback:    1600ms;  /* cuánto queda visible el acierto/error       */
  --t-transicion:   500ms;  /* cruce entre pregunta 1 y pregunta 2         */
  --t-idle-modal:  60000ms; /* inactividad dentro del formulario           */
  --t-idle-juego:  45000ms; /* inactividad en cualquier pantalla de juego  */
  --t-attract:     20000ms; /* ciclo de la animación de atracción          */

  /* 13. Z-INDEX · escala explícita, sin números mágicos */
  --z-base:     0;
  --z-sticky:   10;
  --z-header:   20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-confetti: 50;
  --z-toast:    60;
  --z-debug:    90;
}

/* ===========================================================================
   TEMA CLARO · Panel de administración
   Redefine SOLO los roles semánticos. Las escalas crudas no cambian nunca.
   =========================================================================== */
[data-theme="admin"] {
  --bg:              var(--ink-50);
  --bg-gradient:     none;
  --surface:         var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--ink-100);
  --border:          var(--ink-200);
  --border-strong:   var(--ink-300);

  --text:            var(--ink-800);
  --text-secondary:  var(--ink-600);
  --text-tertiary:   var(--ink-500);
  --text-on-accent:  var(--white);

  --accent:          var(--porta-purple);
  --accent-hover:    var(--porta-purple-600);
  --focus-ring:      var(--porta-purple);

  --shadow-sm: 0 1px 3px rgba(26, 31, 31, 0.10);
  --shadow-md: 0 4px 14px rgba(26, 31, 31, 0.12);
  --shadow-lg: 0 12px 32px rgba(26, 31, 31, 0.16);
  --shadow-xl: 0 24px 60px rgba(26, 31, 31, 0.20);
}

/* ===========================================================================
   MODO ALTO CONTRASTE
   Toggle oculto en el kiosco (5 toques en el logo) por si el stand queda
   bajo luz directa y la TV pierde legibilidad. Es una situación REAL en
   activaciones de retail y no cuesta casi nada dejarlo previsto.
   =========================================================================== */
[data-contrast="high"] {
  --bg:             #001A1A;
  --bg-gradient:    none;
  --surface:        #003333;
  --surface-raised: #004A4A;
  --border:         var(--teal-200);
  --border-strong:  var(--white);
  --text-secondary: var(--white);
  --text-tertiary:  var(--teal-100);
}

/* ===========================================================================
   PREFERENCIAS DEL SISTEMA
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-normal:  1ms;
    --dur-slow:    1ms;
    --dur-slower:  1ms;
    --ease-spring: linear;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   RESET MÍNIMO + BASE DEL KIOSCO
   El kiosco NO scrollea nunca: cada pantalla entra en el viewport.
   =========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Comportamiento específico de kiosco. NO aplicar al panel admin, que sí
   necesita scroll, selección de texto y menú contextual. */
body[data-mode="kiosk"] {
  overflow: hidden;
  position: fixed;
  inset: 0;
  touch-action: manipulation;      /* mata el doble-tap-zoom               */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  cursor: none;                    /* sin puntero visible en la TV         */
}

/* Los inputs del formulario de registro SÍ deben permitir selección */
body[data-mode="kiosk"] input,
body[data-mode="kiosk"] textarea {
  -webkit-user-select: text;
  user-select: text;
  cursor: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* Foco visible SIEMPRE. Nunca `outline: none` sin reemplazo: el panel admin
   se opera con teclado y la accesibilidad no es opcional. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

img, svg { max-width: 100%; height: auto; display: block; }

/* ===========================================================================
   UTILIDADES
   =========================================================================== */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.stack > * + * { margin-block-start: var(--flow, var(--space-4)); }

.tabular { font-variant-numeric: tabular-nums; }