@import 'tailwindcss';

/* Der Kinosaal+Schaltpult-Mix (Design-Entscheid des Commanders, 31.08.2026):
   warmes Schwarz mit Saallicht und Korn, Gold als Akzent, dazu die
   Geräte-Präzision — Segmente, Mono-Caps, LED-Punkte. Die Tokens hier sind
   die EINE Quelle der Farbwelt; alles Weitere sind Tailwind-Klassen. */
@theme {
  --font-display: 'Bricolage Grotesque Variable', Georgia, serif;
  --font-sans: 'Instrument Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;

  /* Bühne und Panels — warm abgetönte Schwarztöne, nie kaltes Grau. */
  --color-buehne: oklch(0.13 0.012 60);
  --color-karte: oklch(0.17 0.015 60);
  --color-samt: oklch(0.16 0.015 60);

  /* Premierengold, in drei Stufen für Verläufe und Ränder. */
  --color-gold-hell: oklch(0.88 0.09 80);
  --color-gold: oklch(0.83 0.11 75);
  --color-gold-tief: oklch(0.74 0.13 60);

  /* Die Aufnahme-LED aus dem Schaltpult. */
  --color-rec: oklch(0.72 0.17 45);

  /* Schriftstufen — warmes Weiß bis Nebel. */
  --color-schnee: oklch(0.93 0.01 80);
  --color-dunst: oklch(0.68 0.015 80);
  --color-nebel: oklch(0.55 0.015 80);

  /* Zustandsfarben, alle in der warmen Familie. */
  --color-gruen: oklch(0.78 0.13 150);
  --color-warn: oklch(0.8 0.12 85);
  --color-rot: oklch(0.68 0.19 25);

  /* Linien und Flächen mit Alpha: im Dunkeln Weiß, im Hellen Tinte (5.6.0). */
  --color-tinte: oklch(1 0 0);
}

:root {
  color-scheme: dark;
}

/* Das Saallicht: zwei warme Glühherde und ein Grundschimmer — liegt als
   festes Bühnenbild hinter allem. */
.buehnenlicht {
  background:
    radial-gradient(900px 520px at 78% 0%, oklch(0.28 0.07 45 / 0.5), transparent 70%),
    radial-gradient(1100px 700px at 0% 100%, oklch(0.24 0.09 25 / 0.55), transparent 65%),
    radial-gradient(700px 400px at 45% 45%, oklch(0.2 0.04 60 / 0.45), transparent 70%);
}

/* Filmkorn — ein feines Turbulenz-Muster, hauchdünn über die Bühne gelegt. */
.filmkorn {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* Volle Segmente der Aussteuerungsanzeige glühen golden. */
.segment-gluehen {
  background: linear-gradient(180deg, var(--color-gold-hell), var(--color-gold-tief));
  box-shadow: 0 0 8px oklch(0.8 0.12 70 / 0.45);
}

/* Eigene Titelleiste (§ 4.2): Das Fenster hat seit 5.1.3 keinen
   Windows-Rahmen mehr (frame:false) — gezogen wird an der Kopfzeile.
   `drag` macht eine Fläche zum Fenstergriff; ALLES Bedienbare darin
   braucht `nicht-ziehbar`, sonst verschluckt der Griff den Klick.
   Doppelklick auf den Griff maximiert, das macht Windows von selbst. */
.ziehbar {
  -webkit-app-region: drag;
}
.nicht-ziehbar {
  -webkit-app-region: no-drag;
}

/* Dezente Scrollbalken — helle Standardbalken zerschneiden die Bühne. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--color-tinte) 14%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: color-mix(in oklch, var(--color-tinte) 24%, transparent); }
::-webkit-scrollbar-track { background: transparent; }

/* Der Poster-Lauf der Erst-Einrichtung (5.5.0): Jede Spalte wandert langsam
   nach oben; die Liste ist verdoppelt, bei -50 % beginnt sie nahtlos von
   vorn. Dauer und Versatz setzt die Komponente je Spalte. */
@keyframes poster-lauf {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
.poster-spalte {
  animation-name: poster-lauf;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

/* ── Hell-Modus (5.6.0, Commander: „White Mode") ─────────────────────────
   Dieselben Tokens, andere Werte: warmes Papier statt Kinosaal, Gold als
   dunklerer Akzent, Tinte statt Weiß für Linien und Flächen. Geschaltet
   über data-design auf <html> (App.tsx, Einstellung „design": dunkel /
   hell / system). */
:root[data-design="hell"] {
  color-scheme: light;
  --color-buehne: oklch(0.965 0.008 80);
  --color-karte: oklch(0.99 0.004 80);
  --color-samt: oklch(0.94 0.01 80);
  --color-gold-hell: oklch(0.6 0.12 72);
  --color-gold: oklch(0.66 0.13 70);
  --color-gold-tief: oklch(0.56 0.13 58);
  --color-rec: oklch(0.6 0.19 40);
  --color-schnee: oklch(0.2 0.012 60);
  --color-dunst: oklch(0.4 0.015 60);
  --color-nebel: oklch(0.55 0.015 60);
  --color-gruen: oklch(0.52 0.15 150);
  --color-warn: oklch(0.58 0.13 80);
  --color-rot: oklch(0.55 0.2 25);
  --color-tinte: oklch(0.15 0.01 60);
}
:root[data-design="hell"] .buehnenlicht {
  background:
    radial-gradient(900px 520px at 78% 0%, oklch(0.9 0.06 80 / 0.6), transparent 70%),
    radial-gradient(1100px 700px at 0% 100%, oklch(0.9 0.05 40 / 0.5), transparent 65%);
}
:root[data-design="hell"] .filmkorn {
  opacity: 0.03;
}