:root {
  /* COLORES BASE */
  --color-bg-base: #1D1D1B;
  --color-bg-surface: #252523;
  --color-bg-elevated: #2F2F2C;
  --color-bg-overlay: #3A3A37;
  --color-accent-primary: #00F280;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #A8A8A4;
  --color-text-muted: #666663;
  --color-border: #3A3A37;
  --color-border-strong: #555552;

  /* CATEGORÍAS */
  --color-cat-1: #C7EC00;
  --color-cat-2: #E7FF00;
  --color-cat-3: #00A4FF;
  --color-cat-4: #004FFF;
  --color-cat-5: #FF0010;
  --color-cat-6: #FF7D16;

  /* ESTADOS */
  --color-status-upcoming: #00A4FF;
  --color-status-live: #00F280;
  --color-status-done: #666663;

  /* TIPOGRAFÍA — Saira Condensed substituye a Flama Condensed; Inter a Flama/Proxima */
  --font-display: "Saira Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-body: "Inter", "Helvetica Neue", "Arial", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;
  --text-4xl: 4.5rem;
  --text-hero: clamp(3.5rem, 9vw, 8rem);

  --font-light: 300;
  --font-regular: 400;
  --font-semibold: 600;
  --font-bold: 700;
  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-base: 1.5;
  --leading-loose: 1.75;

  /* ESPACIADO */
  --space-1: 4px;  --space-2: 8px;
  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  --space-24: 96px;

  /* BORDES Y SOMBRAS */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-accent: 0 0 24px rgba(0,242,128,0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-weight: var(--font-light);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding-bottom: 0.08em;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

img { max-width: 100%; display: block; }

/* Grain overlay for broadcast feel */
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Scrollbar — broadcast-style */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--color-bg-base); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent-primary); }

/* Selection */
::selection { background: var(--color-accent-primary); color: var(--color-bg-base); }