/* =====================================================================
   ACCESO — Design tokens
   Identidad: "luz verde". Tinta profunda + gradiente lima → menta → cian.
   Fuentes (Google Fonts): Bricolage Grotesque (display), Geist (UI), Geist Mono (números/códigos).
   Dark es el tema por defecto; light se activa con [data-theme="light"] en <html>.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Paleta base (no cambia con el tema) ---------- */
  --lime-300: #d9f99d;
  --lime-400: #c6f432;   /* marca: luz verde */
  --mint-400: #2ee6a6;   /* marca: menta */
  --mint-600: #0b9f6e;
  --mint-700: #087a55;
  --cyan-400: #22c3ee;   /* marca: cian */
  --cyan-600: #0384b4;
  --cyan-700: #036a93;
  --coral-400: #ff7a59;  /* acento: "la ticketera", tachados */
  --coral-600: #d9452a;
  --amber-400: #ffc94d;
  --red-500: #ff4d5e;
  --red-600: #e11d48;
  --green-500: #22c55e;
  --wa-green: #25d366;

  --ink-950: #05080f;
  --ink-900: #080d18;
  --ink-850: #0c1322;
  --ink-800: #111a2c;
  --ink-700: #1a2539;
  --ink-600: #26334b;
  --ink-400: #8a97ad;
  --ink-300: #aeb9cb;
  --ink-200: #d3dae5;
  --paper-50: #f7f8f4;
  --paper-100: #eef1ea;
  --white: #ffffff;

  /* ---------- Gradientes de marca ---------- */
  --grad-brand: linear-gradient(120deg, #c6f432 0%, #2ee6a6 45%, #22c3ee 100%);
  --grad-brand-soft: linear-gradient(120deg, rgba(198,244,50,.16), rgba(46,230,166,.12) 45%, rgba(34,195,238,.16));
  --grad-ticket: linear-gradient(160deg, #1b2a45 0%, #0d1628 60%, #0a1120 100%);
  --grad-coral: linear-gradient(120deg, #ff7a59, #ffc94d);
  --grad-danger: linear-gradient(140deg, #ff4d5e, #c81e4a);
  --grad-success: linear-gradient(140deg, #2ee6a6, #0b9f6e);

  /* ---------- Tipografía ---------- */
  --font-display: 'Bricolage Grotesque', 'Geist', system-ui, sans-serif;
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* escala fluida mobile-first (375 → 1440) */
  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.125rem, 1rem + .4vw, 1.3rem);
  --fs-xl: clamp(1.35rem, 1.15rem + .8vw, 1.75rem);
  --fs-2xl: clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem);
  --fs-3xl: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --fs-hero: clamp(2.6rem, 1.7rem + 4.2vw, 5.4rem);

  --lh-tight: 1.04;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --tracking-tight: -.035em;
  --tracking-wide: .08em;

  /* ---------- Espaciado (base 4) ---------- */
  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .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;
  --sp-20: 5rem; --sp-24: 6rem;
  --section-y: clamp(4rem, 3rem + 5vw, 8rem);
  --container: 1200px;
  --gutter: clamp(1.1rem, .6rem + 2vw, 2rem);

  /* ---------- Radios ---------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-1: 140ms; --dur-2: 240ms; --dur-3: 420ms; --dur-4: 700ms;

  /* ---------- Z ---------- */
  --z-nav: 50; --z-float: 60; --z-modal: 80;
}

/* ---------- Tema oscuro (default) ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--ink-950);
  --bg-elev: var(--ink-900);
  --surface: var(--ink-850);
  --surface-2: var(--ink-800);
  --surface-3: var(--ink-700);
  --border: rgba(174, 185, 203, .14);
  --border-strong: rgba(174, 185, 203, .26);
  --text: #f2f5f9;
  --text-muted: var(--ink-300);       /* 9.6:1 sobre bg */
  --text-subtle: var(--ink-400);      /* 6.4:1 sobre bg */
  --text-on-brand: #04130c;           /* texto sobre gradiente de marca */
  --accent: var(--mint-400);
  --accent-strong: var(--lime-400);
  --accent-text: #5ff0bd;             /* links/acentos legibles */
  --grad-text: linear-gradient(100deg, #d4fb4f 0%, #3df0b0 45%, #49d2f5 100%);
  --danger: #ff6b78;
  --success: #34e7a9;
  --warning: var(--amber-400);
  --glow: 0 0 0 1px rgba(46,230,166,.25), 0 10px 40px -10px rgba(46,230,166,.45);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,.6);
  --shadow-lg: 0 30px 80px -20px rgba(0,0,0,.75);
  --shadow-brand: 0 12px 32px -10px rgba(46,230,166,.55);
  --ring: 0 0 0 3px rgba(95, 240, 189, .55);
  --noise-opacity: .05;
  --mesh-1: rgba(46, 230, 166, .20);
  --mesh-2: rgba(34, 195, 238, .18);
  --mesh-3: rgba(198, 244, 50, .10);
  --grid-line: rgba(174, 185, 203, .06);
}

/* ---------- Tema claro ---------- */
[data-theme="light"] {
  color-scheme: light;
  --bg: var(--paper-50);
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: var(--paper-100);
  --surface-3: #e2e7df;
  --border: rgba(8, 13, 24, .10);
  --border-strong: rgba(8, 13, 24, .20);
  --text: #0a111f;
  --text-muted: #3d4a5f;              /* 9.1:1 */
  --text-subtle: #5a6679;             /* 5.9:1 */
  --text-on-brand: #04130c;
  --accent: var(--mint-600);
  --accent-strong: var(--mint-700);
  --accent-text: #067350;             /* 5.9:1 sobre paper */
  --grad-text: linear-gradient(100deg, #4d7c0f 0%, #067a55 45%, #036a93 100%);
  --danger: #c8102e;
  --success: #067350;
  --warning: #9a6200;
  --glow: 0 0 0 1px rgba(11,159,110,.25), 0 10px 40px -12px rgba(11,159,110,.35);
  --shadow-sm: 0 1px 2px rgba(10,17,31,.06);
  --shadow-md: 0 10px 30px -12px rgba(10,17,31,.18);
  --shadow-lg: 0 30px 80px -24px rgba(10,17,31,.28);
  --shadow-brand: 0 12px 30px -12px rgba(11,159,110,.5);
  --ring: 0 0 0 3px rgba(11, 159, 110, .45);
  --noise-opacity: .035;
  --mesh-1: rgba(46, 230, 166, .22);
  --mesh-2: rgba(34, 195, 238, .18);
  --mesh-3: rgba(198, 244, 50, .22);
  --grid-line: rgba(10, 17, 31, .05);
}