/* =====================================================================
   GAMING OLYMPIADE – Theme
   Alle Farben, Schriften und Effekte als CSS-Variablen.
   Zum Anpassen reicht es, diese Datei zu ändern.
   ===================================================================== */

@font-face {
  font-family: 'Anton';
  src: url('/fonts/anton-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Condensed';
  src: url('/fonts/barlow-condensed-700.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* --- Bühne ------------------------------------------------------- */
  --stage-bg: #07060f;            /* Grundfarbe Studio */
  --stage-bg-2: #110d24;          /* Bühnenboden / Verlauf */
  --spot-left: rgba(255, 59, 92, 0.22);   /* Spotlight links (Rot) */
  --spot-right: rgba(47, 128, 255, 0.22); /* Spotlight rechts (Blau) */
  --spot-center: rgba(255, 197, 49, 0.10);/* Mittelspot (Gold) */
  --led-dot: rgba(255, 255, 255, 0.035);  /* LED-Wand-Raster */

  /* --- Akzente ----------------------------------------------------- */
  --red: #ff3b5c;
  --blue: #2f80ff;
  --gold: #ffc531;
  --gold-deep: #e09a00;
  --mint: #21d19f;
  --live: #ff2d55;

  /* --- Flächen & Text --------------------------------------------- */
  --panel: rgba(22, 18, 44, 0.78);
  --panel-solid: #16122c;
  --panel-edge: rgba(255, 255, 255, 0.08);
  --panel-hi: rgba(255, 255, 255, 0.04);
  --text: #f6f3ff;
  --text-dim: #a69fc4;
  --text-faint: #6c658c;

  /* --- Typo -------------------------------------------------------- */
  --font-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;

  /* --- Formen ------------------------------------------------------ */
  --cut: 14px;                    /* abgeschrägte Ecken der Show-Kacheln */
  --radius: 6px;
  --slant: -8deg;                 /* Schräge der Label-Tags */

  /* --- Bewegung ---------------------------------------------------- */
  --ease-pop: cubic-bezier(0.2, 1.4, 0.4, 1);
  --t-fast: 180ms;
  --t-med: 450ms;
  --t-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
    --t-slow: 0ms;
  }
}