/* ============================================================================
 * tokens.css — Plantilla Maestra
 * ----------------------------------------------------------------------------
 * Un nombre por cosa. Oscuro por defecto. Claro con [data-theme="light"].
 * Marca del cliente se define SOLO en brand.css (no aquí).
 * Colores en oklch() para que los tonos salgan parejos con cualquier primario.
 * ========================================================================== */

/* ----- Fuentes (alojadas en public/fonts, no Google Fonts) ----- */
/* ============================================================================
 * TEMA OSCURO (por defecto) — "Noche"
 * ========================================================================== */
:root {
  color-scheme: dark;

  /* --- Marca (fallbacks; brand.css del cliente los sobreescribe) --- */
  --primary-500: oklch(0.62 0.18 275);        /* #6D5BFF aprox */
  --primary-400: oklch(from var(--primary-500) calc(l + 0.08) c h);
  --primary-600: oklch(from var(--primary-500) calc(l - 0.08) c h);
  --primary-50:  oklch(from var(--primary-500) 0.96 calc(c * 0.15) h);
  --primary-rgb: 109 91 255;                  /* para glow (RGB porque opacity-mix de oklch aún tiene bugs en Safari) */

  --accent-500: oklch(0.78 0.17 70);          /* #FFB020 ámbar firma */
  --accent-400: oklch(from var(--accent-500) calc(l + 0.08) c h);
  --accent-text: oklch(0.55 0.18 50);         /* para texto sobre fondo claro */

  --brand-gradient: linear-gradient(135deg, var(--primary-500), var(--accent-500));

  /* --- Neutros (grises fríos, oklch) --- */
  --neutral-50:  oklch(0.98 0.004 265);
  --neutral-100: oklch(0.95 0.006 265);
  --neutral-200: oklch(0.90 0.008 265);
  --neutral-300: oklch(0.80 0.010 265);
  --neutral-400: oklch(0.66 0.012 265);
  --neutral-500: oklch(0.55 0.014 265);
  --neutral-600: oklch(0.44 0.014 265);
  --neutral-700: oklch(0.33 0.014 265);
  --neutral-800: oklch(0.24 0.012 265);
  --neutral-900: oklch(0.17 0.010 265);
  --neutral-950: oklch(0.12 0.008 265);

  /* --- Superficies --- */
  --bg:          var(--neutral-950);
  --surface-1:   var(--neutral-900);  /* tarjeta */
  --surface-2:   var(--neutral-800);  /* modal / elevado */
  --surface-3:   var(--neutral-700);  /* hover de fila */
  --border:      oklch(0.26 0.010 265);
  --border-strong: oklch(0.33 0.014 265);

  /* --- Texto --- */
  --text:        oklch(0.96 0.005 265);
  --text-muted:  var(--neutral-400);
  --text-subtle: var(--neutral-500);
  --link:        var(--primary-400);
  --on-primary:  oklch(0.99 0 0);
  --on-accent:   oklch(0.14 0.03 60);

  /* --- Estados (aviso = naranja #EA580C, no ámbar, para no chocar con acento) --- */
  --success:        oklch(0.62 0.18 150);
  --success-text:   oklch(0.76 0.17 150);
  --success-bg:     oklch(0.22 0.06 150);
  --warning:        oklch(0.65 0.19 40);    /* #EA580C naranja */
  --warning-text:   oklch(0.75 0.17 50);
  --warning-bg:     oklch(0.22 0.07 50);
  --error:          oklch(0.60 0.22 25);
  --error-text:     oklch(0.72 0.19 25);
  --error-bg:       oklch(0.22 0.08 25);
  --info:           oklch(0.60 0.14 230);
  --info-text:      oklch(0.76 0.14 230);
  --info-bg:        oklch(0.22 0.06 230);
  --focus-ring:     var(--primary-400);

  /* --- Paleta de gráficos (Okabe-Ito, apta para daltónicos) --- */
  --chart-1: #0072B2;
  --chart-2: #E69F00;
  --chart-3: #009E73;
  --chart-4: #56B4E9;
  --chart-5: #D55E00;
  --chart-6: #CC79A7;
  --chart-7: #F0E442;
  --chart-8: #9AA2B1;

  /* --- Tipografía --- */
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Space Grotesk", "Inter", "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  clamp(2rem, 6vw, 2.75rem);
  --fs-timer: clamp(3.5rem, 18vw, 6rem);

  --lh-tight:  1.15;
  --lh-normal: 1.5;
  --lh-loose:  1.6;

  /* --- Espaciado (ritmo 4/8) --- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;

  /* --- Anchos y toque --- */
  --w-narrow:  40rem;
  --w-content: 75rem;
  --w-wide:    90rem;
  --tap:       44px;
  --tap-gym:   56px;
  --bottom-bar-h: 64px;

  /* --- Radios --- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;

  /* --- Sombras y glow (glow usa --primary-rgb para que siga la marca) --- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.35);
  --shadow-3: 0 12px 28px rgb(0 0 0 / 0.45);
  --glow-primary: 0 0 24px rgb(var(--primary-rgb) / 0.35);

  /* --- Movimiento --- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --stagger: 50ms;
}

/* ============================================================================
 * TEMA CLARO — "Día"
 * ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --bg:            var(--neutral-50);
  --surface-1:     #ffffff;
  --surface-2:     #ffffff;
  --surface-3:     var(--neutral-100);
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);

  --text:        var(--neutral-950);
  --text-muted:  var(--neutral-700);
  --text-subtle: var(--neutral-600);
  --link:        var(--primary-600);
  --on-primary:  #ffffff;
  --on-accent:   oklch(0.14 0.03 60);

  --success-text:   oklch(0.42 0.16 150);
  --success-bg:     oklch(0.95 0.04 150);
  --warning-text:   oklch(0.42 0.14 45);
  --warning-bg:     oklch(0.96 0.05 50);
  --error-text:     oklch(0.42 0.17 25);
  --error-bg:       oklch(0.96 0.05 25);
  --info-text:      oklch(0.42 0.12 230);
  --info-bg:        oklch(0.95 0.04 230);
  --focus-ring:    var(--primary-600);

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-2: 0 4px 12px rgb(0 0 0 / 0.08);
  --shadow-3: 0 12px 28px rgb(0 0 0 / 0.12);
  --glow-primary: 0 0 16px rgb(var(--primary-rgb) / 0.25);
}

/* ============================================================================
 * MODO DEMO (?demo=1) — para grabar reels; sube base, acento como protagonista
 * ========================================================================== */
[data-demo] {
  --fs-base: 1.0625rem;    /* 17px */
}
[data-demo] .skeleton { animation: none !important; background: var(--surface-2); }
[data-demo] [data-hide-in-demo] { display: none !important; }

/* ============================================================================
 * MODO REELS (?reel=1) — marco de teléfono, oculta chrome del navegador
 * ========================================================================== */
[data-reel] body {
  background: var(--brand-gradient);
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-8);
}
[data-reel] [data-reel-frame] {
  width: 390px;
  max-width: 100%;
  aspect-ratio: 9 / 19.5;
  background: var(--bg);
  border-radius: 48px;
  box-shadow: 0 20px 80px rgb(0 0 0 / 0.4), 0 0 0 10px rgb(0 0 0 / 0.9), 0 0 0 11px rgb(255 255 255 / 0.1);
  overflow: hidden;
  position: relative;
}
[data-reel] [data-hide-in-reel] { display: none !important; }

/* ============================================================================
 * RESET y base
 * ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea, button { font-family: inherit; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: var(--lh-tight); letter-spacing: -0.02em; margin: 0 0 var(--sp-4); }
h1 { font-size: var(--fs-3xl); font-weight: 700; }
h2 { font-size: var(--fs-2xl); font-weight: 700; }
h3 { font-size: var(--fs-xl); font-weight: 600; }
h4 { font-size: var(--fs-lg); font-weight: 600; }

.eyebrow { font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

/* Números tabulares (timer, precios, series) */
.num, [data-num] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Focus visible (teclado) */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ============================================================================
 * VIEW TRANSITIONS API — transiciones suaves entre pantallas (nativo)
 * ========================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--dur-base);
  animation-timing-function: var(--ease-out);
}

::view-transition-old(root) { animation-name: vt-fade-out; }
::view-transition-new(root) { animation-name: vt-fade-in; }

@keyframes vt-fade-out { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-fade-in  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================================
 * ANIMACIONES / MOVIMIENTO
 * ========================================================================== */
@keyframes skeleton-shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes toast-in { from { transform: translateY(1rem); opacity: 0; } }

/* Respeto absoluto a prefers-reduced-motion (incluye View Transitions) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}