/* ============================================================
   Bkmp - Design-Tokens (Redesign Phase 1, 17.07.)
   ============================================================
   Diese Datei ist in Phase 1 bewusst INERT: sie wird geladen, aber noch
   von KEINER bestehenden Regel in style.css referenziert - die Werte
   unten sind erstmal nur eine Kopie der heutigen Werte aus style.css'
   :root-Block (Zeile ~68) und dem App-Modus-Block (Zeile ~7823), plus die
   im Audit als fehlend identifizierten Ergaenzungen (--color-danger,
   Rarity-Skala, Typo-/Abstands-Skala, Bewegungs-Tokens).

   Ab Phase 3 werden die ~15-20 gemeinsamen Basis-Selektoren (Buttons,
   .joke-card, Badges, Fokus-Ringe ...) in style.css schrittweise auf
   var(--...) aus DIESER Datei umgestellt - bis dahin aendert das Laden
   dieser Datei am sichtbaren Ergebnis nichts.

   Stimmungs-Mechanismus (siehe Redesign-Plan, "ein System, zwei
   Stimmungen"): .zone-site (Marketing/Investoren/Marktplatz, ruhiger,
   professioneller) und .zone-game (Idle-Dorf, epischer/lebendiger) setzen
   DIESELBEN --mood-*-Variablennamen auf unterschiedliche Werte - Komponenten
   verzweigen nie selbst, sie lesen nur die Zahl, die gerade gilt.
   ============================================================ */

:root {
  /* ---- Basis-Farben: 1:1 Spiegel der heutigen style.css :root-Werte ---- */
  --color-ink: #F4F2F5;
  --color-bg: #08070A;
  --color-surface: #121016;
  --color-surface-2: #1A1720;
  --color-accent: #C9A56A;       /* = heutiges --gold, vom Akzentfarben-Regler ueberschreibbar */
  --color-accent-fixed: #C9A56A; /* = heutiges --gold-fixed, absichtlich NICHT ueberschreibbar */
  --color-accent-2: #9333EA;     /* = heutiges --purple */
  --color-line: rgba(244, 242, 245, 0.08);
  --color-muted: rgba(244, 242, 245, 0.55);
  --color-positive: #4ADE80;
  --color-negative: #F87171;
  /* NEU (Audit-Fund: kein einziger echter Danger-Button im ganzen Projekt -
     "Konto loeschen" und "Wunsch absenden" teilen sich denselben goldenen
     Button). Bewusst ein eigener, gesaettigterer Rotton als --color-negative
     (das ist Text-/Status-Farbe, --color-danger ist fuer FLAECHEN gedacht:
     Button-Hintergrund einer unumkehrbaren Aktion). */
  --color-danger: #C4433A;
  --color-danger-ink: #FDECEC;
  /* NEU (Phase 3): bisher als rohes #0A0A0F an 11 Stellen in style.css
     hartkodiert (Text auf goldenem/hellem Untergrund, z.B. .btn-ja,
     .btn-primary, .admin-nav-btn.active) - jetzt ein Token, damit eine
     spaetere Akzentfarben-Aenderung (z.B. helleres Gold) diesen Text nicht
     unlesbar macht, ohne dass jede Stelle einzeln geprueft werden muss. */
  --color-accent-ink: #0A0A0F;
  /* NEU: Warn-Farbe fuer Toasts/Hinweise, bewusst von den Rarity-Farben
     unten getrennt (Audit-Prinzip: Rarity-Farbe != Bedeutungs-Farbe). */
  --color-warning: #E8A93C;

  /* ---- Rarity-Skala (Audit-Kernfund: existiert nirgends zentral - Runen,
     Drachen und Kosmetik erfinden je eigene Ad-hoc-Farben). Uebernimmt
     bewusst die genre-weit trainierte Konvention (Diablo/WoW/PoE):
     weiss/grau -> gruen -> blau -> lila -> orange/gold, plus eine sechste
     Mythisch-Stufe fuer BKMPs eigene oberste Kosmetik-Stufe. ---- */
  --rarity-common: #9CA3AF;
  --rarity-uncommon: #4ADE80;
  --rarity-rare: #38BDF8;
  --rarity-epic: #A78BFA;
  --rarity-legendary: #F59E0B;
  --rarity-mythic: #F472B6;

  /* ---- Abstands-Skala: 8px-Raster mit 4px-Halbschritt fuer enge Faelle
     (Icon-Label-Abstaende etc.), wie im Audit als Ziel-Checkliste genannt ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---- Radien ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Typografie: Familien unveraendert (Fraunces/Inter bleiben, siehe
     Audit "gute Schriftwahl, keine Skala") - hier nur die bisher fehlende
     modulare Groessen-Skala (Basis 1rem, Verhaeltnis ~1.2), die die 73
     bisherigen Ad-hoc-Werte in style.css schrittweise ersetzen soll. ---- */
  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-size-2xs: 0.694rem;
  --font-size-xs: 0.833rem;
  --font-size-sm: 0.9rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.44rem;
  --font-size-2xl: 1.728rem;
  --font-size-3xl: 2.074rem;

  /* ---- Schatten ---- */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 6px 20px -6px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 44px -12px rgba(0, 0, 0, 0.55);

  /* ---- Bewegung: Timing/Easing-Baender aus der Marktforschung (Audit
     Abschnitt 19) - ease-out fuers Erscheinen, ease-in fuers Verschwinden,
     100/250/400ms als die drei wiederkehrenden Baender. ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --duration-fast: 100ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---- Z-Index-Skala ---- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-toast: 1100;

  /* ---- Stimmungs-Tokens (Standardwerte = heutiges, ruhigeres
     Erscheinungsbild; .zone-game hebt diese in Phase 5 an). Noch inert:
     keine bestehende Regel liest diese Variablen. ---- */
  --mood-glow-strength: 0.6;
  --mood-gradient-intensity: 1;
  --mood-ornament: 0;      /* 0 = schlichter Rahmen, 1 = verzierter Rahmen fuer besondere Momente */
  --mood-radius-panel: var(--radius-md);
}

html[data-theme="light"] {
  --color-ink: #0E1C17;
  --color-bg: #F6F3EC;
  --color-surface: #EFEADD;
  --color-surface-2: #E5DFCE;
  /* Audit-Fund: heutiges --gold im Hellmodus (#B08D57 auf #F6F3EC) faellt mit
     ca. 2.8:1 klar unter WCAG-AA (4.5:1) - u.a. echte Link-Texte betroffen.
     Dieser Wert ist bewusst dunkler/gesaettigter als das heutige --gold,
     damit derselbe Text auf hellem Grund lesbar wird, sobald Phase 3/4 ihn
     tatsaechlich verwenden. */
  --color-accent: #8A6A3A;
  --color-accent-fixed: #8A6A3A;
  --color-accent-2: #7C3AED;
  --color-line: rgba(14, 28, 23, 0.12);
  --color-muted: rgba(14, 28, 23, 0.64);
  --color-positive: #16A34A;
  --color-negative: #DC2626;
  --color-danger: #B23A31;
  --color-danger-ink: #2A0C09;
  --color-warning: #92651F;
}

/* ---- Zonen/Stimmung: ".zone-site" (Marketing/Investoren/Marktplatz) vs.
   ".zone-game" (Idle-Dorf). In Phase 1 noch ohne Wirkung, da keine Regel
   --mood-* liest; ab Phase 4/5 wird body/Overlay-Root mit der jeweiligen
   Klasse versehen. ---- */
.zone-site {
  --mood-glow-strength: 0.35;
  --mood-gradient-intensity: 0.8;
  --mood-ornament: 0;
}
.zone-game {
  --mood-glow-strength: 1;
  --mood-gradient-intensity: 1.3;
  --mood-ornament: 1;
  --mood-radius-panel: var(--radius-lg);
}

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