/* tokens.css — única fuente de verdad visual junto con tokens.json. No pongas valores a mano en pantallas. */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root {
  /* superficies */
  --surface-0: #0B0B10;
  --surface-1: #14141C;
  --surface-2: #1D1D28;
  --surface-3: #262634;
  --border-subtle: rgba(255,255,255,.08);
  --border-strong: rgba(255,255,255,.16);

  /* texto */
  --text-primary: #F5F5FA;
  --text-secondary: #A0A0B4;
  --text-tertiary: #6B6B80;
  --text-inverse: #0B0B10;

  /* marca */
  --brand: #FF2D95;
  --brand-hover: #FF4DA6;
  --brand-soft: rgba(255,45,149,.16);

  /* en vivo */
  --live: #C6FF3D;
  --live-soft: rgba(198,255,61,.18);
  --live-glow: rgba(198,255,61,.25);

  /* estados */
  --state-soon: #FFB020;
  --state-ended: #5A5A6E;
  --state-full: #FF5A3C;
  --success: #4ADE80;
  --warning: #FFB020;
  --danger: #FF4D4D;
  --info: #38E8FF;

  /* géneros */
  --genre-electronica: #38E8FF;
  --genre-rock: #FF5A3C;
  --genre-rap: #9B5CFF;
  --genre-pop: #FF7AC8;
  --genre-reggaeton: #FF3DAB;
  --genre-salsa: #FFB020;
  --genre-banda: #F2C14E;
  --genre-house: #7CFF6B;
  --genre-otro: #A0A0B4;

  /* QR siempre sobre claro */
  --qr-bg: #FFFFFF;
  --qr-fg: #0B0B10;

  /* tipografía */
  --font-display: 'Unbounded', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --fs-display-xl: 32px;
  --fs-display-l: 24px;
  --fs-display-m: 20px;
  --fs-body-l: 17px;
  --fs-body-m: 15px;
  --fs-body-s: 13px;
  --fs-overline: 11px;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;

  /* spacing base 4 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;

  /* radius */
  --r-chip: 999px;
  --r-button: 14px;
  --r-card: 20px;
  --r-sheet: 28px;
  --r-pin: 999px;
  --r-input: 12px;

  /* tamaños */
  --touch: 44px;
  --pin: 36px;
  --pin-featured: 44px;
  --avatar: 28px;
  --fab: 56px;
  --phone-w: 390px;
  --phone-h: 844px;

  /* elevación: borde sutil + glow, no sombra negra */
  --elev-1: 0 1px 0 rgba(255,255,255,.06) inset;
  --glow-live: 0 0 0 4px rgba(198,255,61,.25);
  --glow-brand: 0 0 24px rgba(255,45,149,.35);
  --glow-brand-soft: 0 0 18px rgba(255,45,149,.28);
  --glow-brand-halo: 0 0 0 4px rgba(255,45,149,.4);
  --glow-success: 0 0 0 6px rgba(74,222,128,.22);
  --shadow-sheet: 0 -8px 32px rgba(0,0,0,.45);

  /* motion */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-sheet: 360ms;
  --dur-pulse: 1600ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* glass (solo tab bar y header sobre mapa) */
  --glass-bg: rgba(20,20,28,.72);
  --glass-blur: blur(18px);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-sheet: 0ms; --dur-pulse: 0ms; }
}