/*
  Projekt:   wlkns.org – Wilkens IT & Consulting
  Datei:     assets/css/tokens.css
  Zweck:     Farbwelten (Design-Tokens) – hell (Standard) und dunkel
  Version:   2.9.0
  Autor:     Stephan Wilkens / Wilkens IT & Consulting
  Geändert:  2026-09-26

  Verwendung
    <link rel="stylesheet" href="/assets/css/tokens.css">
    <html>                     → hell (Standard, öffentliche Website)
    <html data-theme="dark">   → dunkel, fest
    <html data-theme="auto">   → folgt der Geräteeinstellung (prefers-color-scheme)
    Umschalten per Skript: document.documentElement.dataset.theme = "dark" | "light" | "auto"

  Farbregel (Markenabgrenzung, siehe docs/farbwelten.md)
    Genau eine Akzentfarben-Familie Kupfer/Amber: hell Kupfer #8f520f, dunkel Amber #e3a857.
    Nicht gelber oder satter, kein Blau/Grün als Zweitfarbe, keine Verläufe, kein Glow.
    Fehler/Erfolg immer zusätzlich mit Symbol (⚠/✓), nie nur über Farbe.

  Kontraste (WCAG 2.2, nachgerechnet)
    hell:   Text 15,1:1 · gedämpft 7,0:1 · Akzent 5,65:1 (Tönung 5,2:1) · Button-Schrift 6,2:1
            Eingabe-Rahmen 3,7:1 (Alt-Fläche 3,4:1) · Fehler 5,95:1 · Erfolg 5,85:1
            Footer: Text 13,8:1 · gedämpft 8,1:1 · Fokus 7,5:1
    dunkel: Text 13–15:1 · gedämpft ≥ 7,2:1 · Akzent ≥ 7,9:1 · Button-Schrift 8,9:1
            Eingabe-Rahmen 3,5:1 · Fehler 7,3:1
*/

/* ---------------------------------------------------------------------
   Hell (Standard)
   ------------------------------------------------------------------ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f6f4f0;
  --color-bg-alt: #eeeae3;
  --color-surface: #ffffff;
  --color-border: #e2ddd4;
  --color-border-strong: #c9c1b4;
  --color-border-input: #857d71;
  --color-border-input-hover: #655e54;
  --color-text: #1c1f23;
  --color-text-muted: #4d545c;
  --color-accent: #8f520f;
  --color-accent-hover: #74420b;
  --color-accent-soft: rgb(143 82 15 / 0.06);
  --color-accent-line: rgb(143 82 15 / 0.30);
  --color-on-accent: #ffffff;
  --color-marker: #857d71;
  --color-error: #b3261e;
  --color-error-soft: rgb(179 38 30 / 0.10);
  --color-success: #2e6b34;

  /* Dunkler Footer als ruhiger Abschluss der hellen Seite */
  --color-footer-bg: #1f2328;
  --color-footer-text: #eef0f2;
  --color-footer-muted: #b3bac1;
  --color-footer-border: #3a4048;
  --color-footer-accent: #e3a857;
}

/* ---------------------------------------------------------------------
   Dunkel – fest (data-theme="dark")
   Werte identisch mit dem Block „auto“ unten halten (Test prüft das).
   ------------------------------------------------------------------ */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #121416;
  --color-bg-alt: #181b1e;
  --color-surface: #1b1f23;
  --color-border: #2c3238;
  --color-border-strong: #3d454d;
  --color-border-input: #6b747d;
  --color-border-input-hover: #8a939c;
  --color-text: #e7e9eb;
  --color-text-muted: #a6adb4;
  --color-accent: #e3a857;
  --color-accent-hover: #efbd75;
  --color-accent-soft: rgb(227 168 87 / 0.08);
  --color-accent-line: rgb(227 168 87 / 0.35);
  --color-on-accent: #17120a;
  --color-marker: #8a939c;
  --color-error: #f2918f;
  --color-error-soft: rgb(242 145 143 / 0.15);
  --color-success: #95d3a0;

  --color-footer-bg: #121416;
  --color-footer-text: #e7e9eb;
  --color-footer-muted: #a6adb4;
  --color-footer-border: #2c3238;
  --color-footer-accent: #e3a857;
}

/* ---------------------------------------------------------------------
   Automatisch nach Geräteeinstellung (data-theme="auto")
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;

    --color-bg: #121416;
    --color-bg-alt: #181b1e;
    --color-surface: #1b1f23;
    --color-border: #2c3238;
    --color-border-strong: #3d454d;
    --color-border-input: #6b747d;
    --color-border-input-hover: #8a939c;
    --color-text: #e7e9eb;
    --color-text-muted: #a6adb4;
    --color-accent: #e3a857;
    --color-accent-hover: #efbd75;
    --color-accent-soft: rgb(227 168 87 / 0.08);
    --color-accent-line: rgb(227 168 87 / 0.35);
    --color-on-accent: #17120a;
    --color-marker: #8a939c;
    --color-error: #f2918f;
    --color-error-soft: rgb(242 145 143 / 0.15);
    --color-success: #95d3a0;

    --color-footer-bg: #121416;
    --color-footer-text: #e7e9eb;
    --color-footer-muted: #a6adb4;
    --color-footer-border: #2c3238;
    --color-footer-accent: #e3a857;
  }
}