/* ═══════════════════════════════════════════════════════════════════
   A68A — Basis-Palette
   ═══════════════════════════════════════════════════════════════════
   Der verbindliche Farbstand. Wird von jeder Seite eingebunden, damit eine
   Farbänderung an EINER Stelle passiert und nicht in achtzehn Dateien.

   Einbinden im <head>, VOR dem seiteneigenen <style>:
       <link rel="stylesheet" href="a68a-basis.css">

   Wichtig zum Verständnis: Seiten, die dieselbe Variable in ihrem eigenen
   <style> nochmal setzen, gewinnen weiterhin (gleiche Spezifität, später
   im Dokument). Diese Datei ist deshalb der Bezugspunkt für alles Neue —
   der Altbestand wandert nach und nach hierher, Seite für Seite, statt in
   einem großen Umbau mit ungewissem Ausgang.

   ───────────────────────────────────────────────────────────────────
   Stand: 16. August 2026 — auf das 365art-Designsystem umgestellt.

   QUELLE:  ../../365art/design/tokens.css
            dokumentiert in ../../365art/Designsystem.md

   Vorher Blau (#1A4A7C) + Gold (#C9A961) auf hellem Grund.
   Jetzt mattes Graphit + Bernstein, unternehmensweit einheitlich.

   Die VARIABLENNAMEN bleiben unverändert — jede Seite, die sie bereits
   benutzt, zieht die neuen Werte ohne weitere Anpassung. Die Werte stehen
   hier ausgeschrieben statt als var()-Verweis, weil die Token-Namen der
   Quelle (--bg, --accent, --text) bei A68A eine andere Bedeutung haben und
   sich sonst gegenseitig überschreiben würden.

   Bei Änderungen an der Quelle: diese Datei nachziehen.
   ═══════════════════════════════════════════════════════════════════ */

/* ── HELL (Standard) ──────────────────────────────────────────────
   Warme helle Graustufen. Für Schul- und Kundenkontakt: Nachweis-PDFs,
   Ausdrucke, lange Lesestrecken.                                       */
:root {
  /* Akzente — Semantik wie bisher:
     --accent        = dunkle Fläche (Kopfzeilen, Bänder)
     --accent-bright = Signal (Knöpfe, Links, Hervorhebung)
     --accent-light  = heller Verlauf, auf dunklem Grund lesbar          */
  --accent:        oklch(0.30 0.010 70);   /* Graphit — war #1A4A7C     */
  --accent-bright: oklch(0.52 0.12 68);    /* Bernstein, hell-tauglich   */
  --accent-light:  oklch(0.80 0.12 80);

  /* Schriftfarbe AUF --accent-bright. Sie kehrt sich mit dem Modus um, weil
     sich die Fläche umkehrt: hell ist der Akzent ein dunkles Bernstein-Bronze
     (weiße Schrift, 5,3:1), dunkel ein helles Bernstein (dunkle Gravur, 11:1).
     Beide Richtungen liegen damit über AA. */
  --on-accent:     oklch(0.98 0.008 80);

  /* Gold: bleibt als eigener Zweitakzent bestehen, jetzt aus dem
     Bernstein-Kanal statt #C9A961. */
  --gold:          oklch(0.74 0.12 60);

  /* ── Flächen hell ─────────────────────────────────────────────── */
  --bg:            oklch(0.97 0.006 80);
  --bg-soft:       oklch(0.94 0.008 80);
  --bg-elevated:   oklch(1.00 0     0 );
  --bg-warm:       oklch(0.95 0.012 80);

  /* ── Flächen dunkel (für dunkle Abschnitte auf hellen Seiten) ─── */
  --bg-deep:       oklch(0.23 0.010 70);
  --bg-deep-2:     oklch(0.19 0.009 70);

  /* ── Schrift ──────────────────────────────────────────────────── */
  --text:          oklch(0.25 0.010 70);
  --text-soft:     oklch(0.45 0.012 75);
  --text-mute:     oklch(0.54 0.012 80);
  --on-dark:       oklch(0.98 0.008 80);
  --on-dark-soft:  oklch(0.88 0.010 80);
  --on-dark-mute:  oklch(0.72 0.012 80);

  /* ── Linien und Zustände ──────────────────────────────────────── */
  --line:          oklch(0.88 0.008 80);
  --line-strong:   oklch(0.80 0.010 80);
  --ok:            oklch(0.52 0.11 150);
  --warn:          oklch(0.54 0.12 62);
  --bad:           oklch(0.50 0.15 30);

  /* ── Maße ─────────────────────────────────────────────────────── */
  --container:     1320px;
  --radius:        6px;     /* war 16px — kleine Radien, Gerätecharakter */
  --ease-out:      cubic-bezier(.16,1,.3,1);
  --shadow:        0 1px 3px rgb(0 0 0 / .05), 0 10px 30px rgb(40 35 30 / .07);
  --shadow-lift:   0 4px 12px rgb(0 0 0 / .07), 0 24px 56px rgb(40 35 30 / .13);

  /* ── Typografie ───────────────────────────────────────────────── */
  --ff-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ff-mono: "Geist Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
}

/* ── DUNKEL ─────────────────────────────────────────────────────────
   Das eigentliche Markenbild: mattes Graphit, Bernstein als einziges
   Licht. Wird über data-theme="dark" am <html> geschaltet; die Seiten
   setzen das Attribut selbst aus dem localStorage-Wert „a68a-theme".   */
:root[data-theme="dark"] {
  --accent:        oklch(0.36 0.012 70);
  --on-accent:oklch(0.23 0.010 70); --accent-bright: oklch(0.86 0.14  85);   /* Bernstein — der Akzent     */
  --accent-light:  oklch(0.74 0.12  60);
  --gold:          oklch(0.86 0.14  85);

  --bg:            oklch(0.30 0.010 70);
  --bg-soft:       oklch(0.33 0.011 70);
  --bg-elevated:   oklch(0.36 0.012 70);
  --bg-warm:       oklch(0.33 0.011 70);

  --bg-deep:       oklch(0.23 0.010 70);
  --bg-deep-2:     oklch(0.19 0.009 70);

  --text:          oklch(0.98 0.008 80);
  --text-soft:     oklch(0.88 0.010 80);
  --text-mute:     oklch(0.72 0.012 80);

  --line:          oklch(0.40 0.012 70);
  --line-strong:   oklch(0.48 0.014 70);
  --ok:            oklch(0.72 0.09  150);
  --warn:          oklch(0.75 0.13  60);
  --bad:           oklch(0.65 0.14  30);

  --shadow:        inset 0 1px 0 rgb(255 255 255 / .05), 0 1px 2px rgb(0 0 0 / .45);
  --shadow-lift:   inset 0 1px 0 rgb(255 255 255 / .06), 0 6px 16px rgb(0 0 0 / .45);
}
