/* web/app/styles/tokens.css — Tokens de diseño (CONTRATO.md, Anexo B). Dueño: S6.
   Paleta «Burbu»: índigo como color principal, turquesa para la mascota, oro para la XP,
   naranja para la racha y rosa-rojo para las vidas. Los NOMBRES del Anexo B son fijos; los valores
   son de S6. Al final hay unas pocas variables de extensión (--c-mascot…, --c-lv-…) que solo usa
   el cascarón; ningún otro módulo las necesita.

   Tema: automático según el sistema; html[data-theme="light"|"dark"] fuerza uno (lo pone el shell
   según prefs.theme). */

:root {
  /* Fondos y bordes */
  --c-bg: #f6f7fc;
  --c-surface: #ffffff;
  --c-surface-2: #eef0fa;
  --c-border: #dde1f0;

  /* Textos */
  --c-text: #1d2142;
  --c-text-muted: #5c6488;
  --c-text-inverse: #ffffff;

  /* Botón principal */
  --c-primary: #4652e6;
  --c-primary-press: #2f39b8;
  --c-on-primary: #ffffff;

  /* Acierto, error, aviso */
  --c-success: #167a3a;
  --c-success-bg: #dff7e6;
  --c-error: #c42f3a;
  --c-error-bg: #ffe4e5;
  --c-warning: #a35f00;

  /* XP, racha, vidas */
  --c-xp: #e3a400;
  --c-streak: #ff7a1a;
  --c-life: #ef3e64;

  /* Radios */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Espacios (4 · 8 · 12 · 16 · 24 · 32) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Tipografía del sistema, redondeada en iPhone (SF Pro Rounded), 0 KB de descarga */
  --fs-sm: 14px;
  --fs-md: 17px;
  --fs-lg: 21px;
  --fs-xl: 28px;
  --font-ui: ui-rounded, system-ui, -apple-system, 'SF Pro Rounded', 'Nunito', 'Segoe UI Variable Display',
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Área táctil mínima (§8.6) */
  --tap-min: 48px;

  /* Zonas seguras del iPhone */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Animaciones */
  --dur-fast: 120ms;
  --dur-med: 260ms;
  --dur-slow: 650ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Sombras */
  --shadow-1: 0 2px 6px rgba(29, 33, 66, 0.1);
  --shadow-2: 0 12px 28px rgba(29, 33, 66, 0.18);

  /* ── Extensiones de S6 (solo cascarón) ── */
  --c-mascot: #22c3b5;
  --c-mascot-shade: #149488;
  --c-cheek: #ff8fa3;
  --c-overlay: rgba(14, 16, 40, 0.48);
  --c-locked: #c4c9de;
  --c-lv-a1: #1e9a4a;
  --c-lv-a2: #0e8f89;
  --c-lv-b1: #2f6fe0;
  --c-lv-b2: #7c5cf0;
  --c-lv-c1: #c43695;
  --c-lv-ex: #d46f0c;
  --c-lv-an: #64748b;
  --c-on-accent: #ffffff; /* texto e iconos sobre colores de nivel, vidas, etc. */

  color-scheme: light dark;
}

/* Valores oscuros: se repiten en dos bloques (automático y forzado) para no depender de :is(). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --c-bg: #11132a;
    --c-surface: #1b1e3b;
    --c-surface-2: #252950;
    --c-border: #363b68;
    --c-text: #f1f2fb;
    --c-text-muted: #a9aed3;
    --c-text-inverse: #11132a;
    --c-primary: #8a94ff;
    --c-primary-press: #5f6ae0;
    --c-on-primary: #0d0f26;
    --c-success: #5ad37e;
    --c-success-bg: #173a26;
    --c-error: #ff7a82;
    --c-error-bg: #47202a;
    --c-warning: #ffb547;
    --c-xp: #ffcc33;
    --c-streak: #ff9a4d;
    --c-life: #ff6f8e;
    --shadow-1: 0 2px 6px rgba(0, 0, 0, 0.45);
    --shadow-2: 0 12px 28px rgba(0, 0, 0, 0.55);
    --c-mascot: #3ad6c8;
    --c-mascot-shade: #1fa497;
    --c-overlay: rgba(4, 5, 16, 0.66);
    --c-locked: #4a4f7c;
    --c-lv-a1: #4cc874;
    --c-lv-a2: #2fc1ba;
    --c-lv-b1: #5c9bff;
    --c-lv-b2: #9b82ff;
    --c-lv-c1: #ee68c2;
    --c-lv-ex: #ffa04a;
    --c-lv-an: #8b9bb4;
    --c-on-accent: #11132a;
  }
}

:root[data-theme='dark'] {
  --c-bg: #11132a;
  --c-surface: #1b1e3b;
  --c-surface-2: #252950;
  --c-border: #363b68;
  --c-text: #f1f2fb;
  --c-text-muted: #a9aed3;
  --c-text-inverse: #11132a;
  --c-primary: #8a94ff;
  --c-primary-press: #5f6ae0;
  --c-on-primary: #0d0f26;
  --c-success: #5ad37e;
  --c-success-bg: #173a26;
  --c-error: #ff7a82;
  --c-error-bg: #47202a;
  --c-warning: #ffb547;
  --c-xp: #ffcc33;
  --c-streak: #ff9a4d;
  --c-life: #ff6f8e;
  --shadow-1: 0 2px 6px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 12px 28px rgba(0, 0, 0, 0.55);
  --c-mascot: #3ad6c8;
  --c-mascot-shade: #1fa497;
  --c-overlay: rgba(4, 5, 16, 0.66);
  --c-locked: #4a4f7c;
  --c-lv-a1: #4cc874;
  --c-lv-a2: #2fc1ba;
  --c-lv-b1: #5c9bff;
  --c-lv-b2: #9b82ff;
  --c-lv-c1: #ee68c2;
  --c-lv-ex: #ffa04a;
  --c-lv-an: #8b9bb4;
  --c-on-accent: #11132a;
  color-scheme: dark;
}

:root[data-theme='light'] {
  color-scheme: light;
}

/* Sin animaciones grandes si el usuario lo pide (§8.6) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med: 1ms;
    --dur-slow: 1ms;
  }
}