/* tokens.css — Brand-Farben als CSS Custom Properties.
 *
 * Wird als ERSTES CSS in jedem HTML geladen (vor nav.css / pages.css / tailwind.css),
 * damit alle anderen Stylesheets und Inline-Styles die Tokens verwenden können.
 *
 * Component-eigene Farben (BorderGlow Pink, Electric-Cyan, Gold-Gradient etc.)
 * leben weiterhin lokal in den jeweiligen Komponenten — hier sind nur die
 * brand-weiten Farben, die an mehreren Stellen wiederverwendet werden. */

:root {
  /* Browser-Hint: Page ist dark-theme. Beeinflusst Browser-Default-Backgrounds für Form-
     Elements, Scrollbars UND den Document-Background ZWISCHEN Page-Loads (= verhindert
     den White-Flash beim Hard-Refresh, den Iteration 1-7 nicht lösen konnten). */
  color-scheme: dark;

  /* Backgrounds */
  --bg-page: #050403;        /* Page-Hintergrund (alle Pages außer stage.html) */
  --bg-card: #111;           /* Card-Background für Spotlight + Electric-Border */
  --border-card: #222;       /* Card-Border-Farbe */

  /* Brand-Akzente */
  --accent-green: #4ade80;       /* Hero-Rotating-Word, Empfohlen-Badge — Tailwind green-400 */
  --accent-green-deep: #22c55e;  /* Section-Highlight — Tailwind green-500 */
  --accent-blue: #60a5fa;        /* Section-Highlight, Sweet-Spot-Badge — Tailwind blue-400 */
}