/* ============================================================
   Design-Tokens — Sudoku Sagax
   Struktur & Namen nach Design-Spec (Phase 0.1), Werte in der
   bestehenden Wein/Gold-„Noir"-Palette gehalten (Marken-Parität,
   passt zu den warm getönten Fuchs-/Rang-/Difficulty-Bildern).
   Wird VOR styles.css geladen. Die Alias-Schicht am Ende bildet die
   alten Variablennamen auf die neuen ab, damit die schrittweise
   Migration von styles.css ohne Bruch läuft.
   ============================================================ */
:root {
  /* ---- Surfaces (Wein-dunkel) ---- */
  --color-bg-base: #1c0c0f;
  --color-bg-surface: #2a1216;
  --color-bg-surface-raised: #4a1922; /* == bisheriges --wine (Parität) */
  --color-bg-overlay: rgba(20, 9, 11, 0.72);

  /* ---- Panels (Glas) + tiefer Rotton ---- */
  /* Etwas mehr Wärme als früher (0.05): Über dem weinfarbenen Schleier hebt sich
     die Karte damit ab, statt in ihm zu verschwinden. */
  --color-panel: rgba(255, 238, 222, 0.07);
  --color-panel-border: rgba(230, 200, 170, 0.13);
  --color-accent-deep: #a8202b; /* == bisheriges --accent2 */
  /* Schrift AUF dem tiefroten Knopf. Bewusst theme-UNABHAENGIG: Der Knopfgrund
     ist in beiden Themes derselbe (--color-accent-deep steht nur hier), also
     muss die Schrift darauf in beiden Themes dieselbe sein.

     Vorher stand dort --color-text-primary. Das ist im hellen Theme
     dunkelbraun (#2c1c14) und ergab 2,26:1 auf dem Rot, am dunklen Ende des
     Verlaufs 1,52:1 — verlangt sind 4,5:1. Im Dunkelmodus war derselbe Token
     hell und alles stimmte, deshalb ist es nie aufgefallen. Ein Test rechnet
     es jetzt nach. */
  --on-accent-deep: #f4e8d2;

  /* Der Schein unter dem Hauptknopf. Im Dunkeln ist der rote Glow richtig, er
     liest als Glut. Auf Creme mischt sich dasselbe Rot in der weichen Kante zu
     staubigem Rosa — das ist der Halo, der aufgefallen ist. Deshalb
     tokenisiert und im hellen Theme durch einen warm-neutralen Schatten
     ersetzt (siehe themes.css). */
  --shadow-primary: 0 10px 30px -8px color-mix(in srgb, var(--color-accent-deep) 75%, transparent);
  --shadow-primary-hover: 0 14px 36px -8px color-mix(in srgb, var(--color-accent-deep) 85%, transparent);

  /* ---- Oberflächen-Overlays & Linien (theme-aware; Light-Werte in themes.css).
     Ersetzen die verstreuten rgba(255,255,255,x)/rgba(0,0,0,x)-Literale, damit
     Dark/Light überall greift. Dark-Werte == bisherige (Sicht-Parität). ---- */
  --surface-1: rgba(255, 255, 255, 0.05); /* zarte Fläche / Hover */
  --surface-2: rgba(255, 255, 255, 0.08); /* stärkere Fläche */
  --surface-3: rgba(255, 255, 255, 0.12); /* Hover stark */
  --hairline: rgba(255, 255, 255, 0.16); /* sichtbare Trennlinie */
  --hairline-soft: rgba(255, 255, 255, 0.06); /* zarte Trennlinie */
  --hairline-strong: rgba(255, 255, 255, 0.22);
  --star-empty: rgba(255, 255, 255, 0.2); /* leerer Stern */
  --scrim: rgba(0, 0, 0, 0.28); /* Backdrop hinter Overlays */
  /* Vollflächen-Overlay (Pause, Gewinn, Profil, Einstellungen). Vorher
     rgba(6, 5, 11, .82) — mehr Blau als Rot. Die Karten darüber sind warm
     getönt, aber bei 7 % Deckkraft schlägt der Schleier durch: Gewinn, Profil
     und Einstellungen wirkten dadurch wie Systemdialoge über dem Spiel, während
     alles andere in Wein und Kupfer steht. Jetzt weinschwarz statt blauschwarz. */
  --scrim-panel: rgba(28, 10, 14, 0.84);

  /* ---- Primary (Gold-Akzent) ---- */
  --color-primary: #d9a84e;
  /* Der Akzent als SCHRIFT und als Fokusring. Getrennt vom Flaechen-Akzent,
     weil Text und Rahmen strengere Kontraste brauchen als Flaechen. Im
     Dunkelmodus ist das Gold hell genug (8,71:1); im hellen Theme kippt es auf
     einen dunkleren Ton (themes.css) — dasselbe Gold haette dort nur 2,79:1,
     als Text wie als Fokusring zu wenig. */
  --color-primary-text: #d9a84e;
  --color-primary-hover: #ecc76a;
  --color-primary-active: #c2923a;
  --color-primary-muted: #8a6d34;

  /* ---- Semantik ---- */
  --color-success: #6fae76;
  --color-error: #e0556a;
  --color-warning: #e8a13c;
  --color-info: #6f9fd0;

  /* ---- Text ---- */
  --color-text-primary: #f4e8d2;
  /* Eine Spur heller als früher (#b49a86): Auf dem durchscheinenden Feld der
     Rätselart-Kacheln lag die gedämpfte Schrift bei 4.20:1 und damit unter
     dem Richtwert 4.5 — die einzige von 90 gemessenen Stellen. Weil im
     dunklen Design jeder Grund dunkel ist, hebt ein helleres Grau den
     Kontrast überall, ohne irgendwo etwas zu verschlechtern. Der Abstand zur
     Hauptschrift (#f4e8d2) bleibt groß genug, dass die Rangfolge erhalten
     bleibt. */
  --color-text-secondary: #bda392;
  /* Von #8a7360 auf #9c8672 aufgehellt: Auf der (jetzt wärmeren) Dialogkarte lag
     der Kontrast bei 3,75:1 und damit unter AA — schon vor der Token-Änderung bei
     4,2:1, also ohnehin zu dunkel. Jetzt 4,83:1. Ein Test rechnet das nach. */
  --color-text-muted: #9c8672;
  --color-text-disabled: #5f5148;

  /* ---- Board-Grundflaeche (Dark): Zellen zwei Stufen ueber Body abgesetzt,
         alternierend fuer die 3x3-Bloecke (Schachbrett-Struktur). ---- */
  --board-cell-base: #26120f; /* warmer Wein, heller als Body (#1c0c0f) */
  --board-cell-alt: #2c1613;  /* eine Stufe heller fuer die ungeraden Bloecke */
  --grid-line: rgba(212, 148, 87, 0.22);       /* Kupfer, Zell-Trennlinien 1px */
  --grid-line-block: rgba(226, 166, 106, 0.9);  /* Kupfer, 3x3-Trennlinien 2px — heller + deckender, damit die Blockstruktur im dunklen Theme klar staerker traegt als die Zellgrenzen (BEFUND 3.5) */
  --board-frame: rgba(212, 148, 87, 0.55);     /* warmer Kupfer-Aussenrahmen */
  --board-highlight-line: rgba(255, 224, 178, 0.1); /* dezenter, aber sichtbarer Reihen/Spalten/Block-Overlay */

  /* ---- Board-Zellzustände (auf transparentem Layer) ---- */
  --cell-selected: rgba(217, 168, 78, 0.35);
  --cell-peer: rgba(217, 168, 78, 0.10);
  /* Fuchsbau. Die Strasse ist DUNKLER als der Zellgrund, nicht goldener --
     sonst ist sie von der Turmreichweite nicht zu trennen (beide waren im
     Entwurf 0,015 Alpha auseinander, bei gleichem Farbton). */
  --fb-road: rgba(0, 0, 0, 0.52);
  /* Die hellere Spur in der Rinne. Warm gehalten, nicht grau: Ein grauer
     Streifen auf weinrotem Grund liest sich als Fehler in der Darstellung,
     ein warmer als getretener Boden. */
  --fb-road-spur: rgba(150, 96, 62, 0.26);
  /* Die Gegner. Hell, nicht rot: Rot auf weinrotem Grund ist der Grund,
     warum zwei Pruefer unabhaengig voneinander „man sieht sie nie" notiert
     haben. Rot bleibt dem Brocken vorbehalten, der einmal je Lauf kommt. */
  --fb-gegner: #e8d3c4;
  /* Der Grund der Gasse. Deckend, damit sie als eigener Raum ueber dem
     Raetsel liegt und damit man messen kann, was man sieht. */
  --fb-gassen-grund: #241012;
  --fb-den-glow: rgba(226, 101, 46, 0.20);
  --cell-same-number: rgba(217, 168, 78, 0.22);
  --cell-conflict: rgba(224, 85, 106, 0.28);
  --cell-success: rgba(111, 174, 118, 0.25);
  --cell-hint: rgba(232, 161, 60, 0.28);

  /* ---- Ziffernfarben ---- */
  --num-given: #f4e8d2;
  --num-user: #ecc76a;
  --num-pencil: #b49a86;
  --num-error: #e0556a;

  /* ---- Killer: Summen-Chip (themenabhaengig, damit die Ziffer im Anker-Feld in
         BEIDEN Themes kontrastiert; dunkles Theme: dunkler Chip, helle Zahl) ---- */
  --killer-sum-bg: rgba(22, 13, 8, 0.92);
  --killer-sum-fg: #ffe2a6;

  /* ---- Typografie ---- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-numeric: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-pencil: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Spacing (4er-Skala) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;

  /* ---- Radien ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 400ms;
  --dur-celebration: 900ms;

  /* ---- Elevation (Wein-dunkler Schatten) ---- */
  --shadow-sm: 0 1px 2px rgba(10, 4, 6, 0.4);
  --shadow-md: 0 4px 16px rgba(10, 4, 6, 0.5);
  --shadow-lg: 0 16px 40px rgba(10, 4, 6, 0.55);
  --shadow-glow-primary: 0 0 24px rgba(217, 168, 78, 0.35);
  --shadow-glow-success: 0 0 24px rgba(111, 174, 118, 0.4);

  /* ============================================================
     Alias-Schicht: alte Namen -> neue Tokens (Werte identisch).
     Ermöglicht die schrittweise Migration von styles.css, ohne die
     Optik zu ändern. HINWEIS: styles.css definiert diese Namen aktuell
     noch selbst in seinem :root und überschreibt die Aliase (spätere
     Ladung gewinnt) — das ist in Phase 0 gewollt (rein additiv, null
     Sicht-Risiko). Die Aliase greifen, sobald die Definitionen dort
     im Zuge der Migration entfernt werden.
     ============================================================ */
  --bg: var(--color-bg-base);
  --bg2: var(--color-bg-surface);
  --wine: var(--color-bg-surface-raised);
  --panel: var(--color-panel);
  --panel-brd: var(--color-panel-border);
  --text: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --accent: var(--color-primary);
  --accent2: var(--color-accent-deep);
  --gold: var(--color-primary-hover);
  /* Ein Gold, das eine Kante zieht, ohne sie zu schreien: fuer Raender an
     Bildern, Dialogen und am fertigen Block. Beide Namen wurden benutzt,
     bevor sie existierten -- fuenf bzw. eine Deklaration fielen dadurch
     ersatzlos aus, siehe Test 238n. */
  --gold-soft: rgba(236, 199, 106, 0.34);
  --line: var(--color-panel-border);
  --danger: var(--color-error);
  /* Schriftgrößen-Skala (BEFUND-2 3.3): eine Stufenleiter als Referenz statt
     Dutzender Einzelwerte. Bestehende Regeln wandern schrittweise darauf; die
     kaum unterscheidbaren Halbschritte (12,5 / 13,5 …) sind raus, und ein Test
     verbietet neue .5px-Schriftgrößen. */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  /* BEFUND-2 4.7: weiche Verlaufskante rechts für waagerecht scrollbare Leisten
     (Avatare, Level-Seiten, Mobil-Navigation) — signalisiert "geht weiter". */
  --scroll-fade-mask: linear-gradient(to right, #000 0, #000 calc(100% - 26px), transparent);
}

/* ---- 0.3 Motion-Guard: Bewegung reduzieren, wenn gewünscht ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}