/* ============================================================================
   Primitives — Rohwerte des Designsystems.
   Quelle: Styleguide `packages/ui/styleguide.html` / frontend-plan § 6.

   FE-10/FE-12: Diese Datei ist die EINZIGE Stelle im Repo, an der Hex-Werte
   stehen. Komponenten lesen sie NIE direkt, sondern nur über semantic.css
   und zones.css.

   Benennung: englisch (Konvention K-1, docs/coding-conventions.md).
   Sieben Werte decken sich exakt mit Pflichtenheft § 10.5.
   ========================================================================== */

:root {
  /* --- Indigo (im Pflichtenheft „primary") ------------------------------- */
  --color-indigo-700: #1c1b32; /* § 10.5 primary/700 */
  --color-indigo-600: #39385f; /* § 10.5 primary/600 */
  --color-indigo-300: #a5a2e5; /* neu — leiser Text auf Tintenflächen */

  /* --- Grau -------------------------------------------------------------- */
  --color-gray-500: #5c5c65; /* § 10.5 grey/500 */

  /* --- Grün (neu — Signaturfarbe, im Pflichtenheft nicht enthalten) ------ */
  --color-green-200: #c9e2be; /* Fläche der festen grünen Zone */
  --color-green-300: #b5cbab; /* Schatten unter der grünen Fläche */
  --color-green-700: #2d5d18; /* Text und Kante darauf */

  /* --- Oliv (Rest der früheren Sekundärfarbe) ---------------------------- */
  --color-olive-500: #555725; /* § 10.5 secondary/500 */
  --color-olive-100: #e0e1d8;

  /* --- Sand (neu — der warme Grund der Anwendung) ------------------------ *
   * Ersetzt das kühle Grau als Fläche und als Rand: Seitengrund, Panel,
   * Haarlinie, Bedienrand. Die Karte bleibt weiß, damit die Staffelung von
   * außen nach innen dunkler endet.                                        */
  --color-sand-50: #f3f2ec; /* Seitengrund, Seitenleiste, blasse Karte */
  --color-sand-100: #e8e7de; /* Panel — ein Schritt dunkler als der Grund */
  --color-sand-200: #c6c5ba; /* Haarlinie: Ränder, Bahnen, harter Versatz */
  --color-sand-400: #828174; /* Bedienrand — 3,17:1 auf dem Panel (1.4.11) */

  /* --- Unbunt ------------------------------------------------------------ */
  --color-white: #ffffff;
  --color-black: #000000; /* nur Kontur, nie Text */
  --color-black-25: rgb(0 0 0 / 25%); /* Schatten unter Bedienelementen */
  --color-black-15: rgb(0 0 0 / 15%); /* Kante über Bildern */
  --color-black-10: rgb(0 0 0 / 10%); /* Kante von Panels und Karten */
  --color-black-45: rgb(0 0 0 / 45%); /* Grund hinter einem Dialog */

  /* --- Statusfarben (Text / Fläche) -------------------------------------- *
   * Die Palette aus Pflichtenheft § 10.5 bringt keine mit — diese sind ergänzt
   * und liegen deshalb bewusst auf DEN ACHSEN DER HAUPTFARBEN, gemessen in
   * OKLCH: alle dunklen Töne auf L ≈ 0,43 wie green-700, olive-500 und
   * coral-700; alle Tints auf L ≈ 0,90 wie green-200 und olive-100.
   *
   * Erfolg ist deshalb kein eigenes Grün, sondern green-700 selbst — die
   * Marke ist das Positivsignal. Warnung sitzt auf 85°, zwischen Oliv (111°)
   * und Bernstein; Gefahr auf 25°, rot genug, um sich von coral-700 (42°) zu
   * unterscheiden.                                                           */
  --color-success-700: #2d5d18;
  --color-success-100: #d1e5ca;
  --color-warning-700: #664c01;
  /* Abgedunkelt aus -700, damit Warntext auf der gruenen Flaeche 4,5:1 haelt. */
  --color-warning-800: #4e3902;
  --color-warning-100: #ecdcbd;
  --color-danger-700: #8d2525;
  --color-danger-100: #f9d4d0;
  --color-neutral-100: #dbdbe2;

  /* --- Metall ------------------------------------------------------------ *
   * Nur fuer die beiden hoechsten Stufen. Gold liegt auf derselben Achse wie
   * die Warnfarbe (88 Grad in OKLCH), Platin auf der von Indigo (285 Grad) —
   * beide gehoeren damit zur Palette und stehen nicht daneben. Warm gegen
   * kuehl ist der Unterschied, den man auch ohne Beschriftung sieht.
   *
   * Je fuenf Stufen, weil ein Metalleffekt einen Verlauf braucht: Glanzkante,
   * Flaeche, Schattenseite — und einen dunklen Ton fuer Text.                */
  --color-platinum-100: #e5e5ee;
  --color-platinum-300: #cdcede;
  --color-platinum-500: #a2a2b7;
  --color-platinum-600: #73738a;
  --color-platinum-700: #4d4d64;
  --color-gold-100: #f3e5c5;
  --color-gold-300: #e7d087;
  --color-gold-500: #cfa43a;
  --color-gold-600: #a4780e;
  --color-gold-700: #684a01;
  --color-coral-700: #7d3a1e;
  --color-coral-100: #f0dfd8;
}