/* sonic design tokens · v1.0.2 · 2026-05-16 · generated from tokens.json */
:root {
  /* Negro profundo base — fondo principal, no #000 puro */
  --color-base: #070708;
  /* Negro elevado — cards, modales, chrome translúcido */
  --color-surface: #101015;
  /* Naranja cálido — focus, CTA, live indicator, mark point. Max 5% del area */
  --color-signal: #FF5530;
  /* Blanco off-pure — titulares, body sobre dark. No #FFFFFF puro */
  --color-text-primary: #F4F4F6;
  /* Gris medio — metadata, captions, timestamps */
  --color-text-secondary: #8A8A92;
  /* Gris oscuro — estados disabled */
  --color-text-disabled: #4A4A52;
  /* Verde cancha — SOLO en contextos in-play / live deportivo, NUNCA en chrome */
  --color-live: #1F4438;
  /* Rojo error — diferenciado del signal por saturación */
  --color-error: #C0392B;
  /* Amber warning — alerts no destructivos */
  --color-warning: #E89610;
  /* Verde success — confirmaciones, completed states */
  --color-success: #2ECC71;
  /* Curva característica — entrada rápida, salida desacelerada */
  --motion-easing-default: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Mute toggle, immediate states */
  --motion-duration-instant: 0ms;
  /* Hover, focus, UI feedback */
  --motion-duration-fast: 120ms;
  /* Transiciones estándar, modals */
  --motion-duration-base: 240ms;
  /* Hero changes, page transitions */
  --motion-duration-slow: 400ms;
  /* Logo reveal, splash, brand moments */
  --motion-duration-cinema: 800ms;
  /* Fallback chain hasta que el custom sonic font esté disponible */
  --typography-fontFamily: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --typography-fontWeight-regular: 400;
  --typography-fontWeight-medium: 500;
  --typography-fontWeight-semibold: 600;
  --typography-fontWeight-bold: 700;
  --typography-fontWeight-extrabold: 800;
  /* Display headlines */
  --typography-tracking-tight: -0.025em;
  /* H1-H3 */
  --typography-tracking-subtle: -0.01em;
  /* Body */
  --typography-tracking-normal: 0;
  /* Mayúsculas en badges */
  --typography-tracking-wide: 0.02em;
  --typography-leading-display: 1.05;
  --typography-leading-heading: 1.2;
  --typography-leading-body: 1.45;
  --typography-leading-caption: 1.3;
  /* TV hero, 10ft viewing */
  --typography-scale-tv-display: 96pt;
  --typography-scale-tv-h1: 64pt;
  --typography-scale-tv-h2: 44pt;
  --typography-scale-tv-h3: 32pt;
  --typography-scale-tv-bodyLg: 24pt;
  --typography-scale-tv-body: 20pt;
  --typography-scale-tv-caption: 16pt;
  --typography-scale-tv-meta: 14pt;
  --typography-scale-web-display: 64pt;
  --typography-scale-web-h1: 44pt;
  --typography-scale-web-h2: 32pt;
  --typography-scale-web-h3: 24pt;
  --typography-scale-web-bodyLg: 18pt;
  --typography-scale-web-body: 16pt;
  --typography-scale-web-caption: 13pt;
  --typography-scale-web-meta: 12pt;
  --typography-scale-mobile-display: 44pt;
  --typography-scale-mobile-h1: 32pt;
  --typography-scale-mobile-h2: 24pt;
  --typography-scale-mobile-h3: 20pt;
  --typography-scale-mobile-bodyLg: 16pt;
  --typography-scale-mobile-body: 14pt;
  --typography-scale-mobile-caption: 12pt;
  --typography-scale-mobile-meta: 11pt;
  --spacing-scale-0: 0;
  --spacing-scale-1: 4px;
  --spacing-scale-2: 8px;
  --spacing-scale-3: 12px;
  --spacing-scale-4: 16px;
  --spacing-scale-5: 20px;
  --spacing-scale-6: 24px;
  --spacing-scale-8: 32px;
  --spacing-scale-10: 40px;
  --spacing-scale-12: 48px;
  --spacing-scale-16: 64px;
  --spacing-scale-20: 80px;
  --spacing-scale-24: 96px;
  --spacing-scale-32: 128px;
  --spacing-grid-tv-columns: 12;
  --spacing-grid-tv-gutter: 32px;
  --spacing-grid-tv-margin: 64px;
  --spacing-grid-tv-safeArea: 64px;
  --spacing-grid-web-columns: 12;
  --spacing-grid-web-gutter: 24px;
  --spacing-grid-web-margin: 64px;
  --spacing-grid-web-container: 1280px;
  --spacing-grid-mobile-columns: 4;
  --spacing-grid-mobile-gutter: 16px;
  --spacing-grid-mobile-margin: 16px;
  --radius-none: 0;
  /* Buttons, badges */
  --radius-sm: 3px;
  /* Cards default */
  --radius-base: 6px;
  /* Modales */
  --radius-lg: 12px;
  /* App launcher icons iOS */
  --radius-xl: 20px;
  /* Pills, circular elements */
  --radius-full: 9999px;
  --shadow-card: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-modal: 0 12px 32px rgba(0,0,0,0.5);
  /* Focus state TV — border signal + soft warm glow, sin scale */
  --shadow-focus: 0 0 0 2px #FF5530, 0 0 16px rgba(255,85,48,0.4);
  --z-base: 0;
  --z-card: 10;
  --z-header: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}