/* ============================================================================
   Semantische Tokens — Rollen statt Farben.
   FE-14: Der Moduswechsel hell/dunkel findet AUSSCHLIESSLICH hier statt.
   Keine Komponente enthält jemals @media (prefers-color-scheme).

   Die Namen unter „Text", „Gründe", „Ränder" und „Status" entsprechen exakt
   dem Styleguide und dürfen nicht abweichen.
   ========================================================================== */

:root {
  /* --- Text -------------------------------------------------------------- */
  --text-primary: var(--color-indigo-700);
  --text-secondary: var(--color-gray-500);
  --text-muted: var(--color-gray-500);
  --text-on-accent: var(--color-white);
  --text-on-highlight: var(--color-indigo-700);
  --text-action-on-highlight: var(--color-white);

  /* --- Gründe ------------------------------------------------------------ */
  color-scheme: light; /* Phase 1 ist hell — auch für Browser-Bedienelemente */
  --bg-page: var(--color-sand-50);
  --bg-surface: var(--color-white);
  --bg-region: var(--color-sand-50);
  --bg-sunken: var(--color-sand-100);

  /* --- Signalflächen ----------------------------------------------------- */
  --bg-accent: var(--color-indigo-700);
  --bg-highlight: var(--color-green-200);
  --bg-action-on-highlight: var(--color-indigo-700);

  /* --- Signalfarben ------------------------------------------------------- *
   * Positiv, abwartend, negativ. Gruen ist die wichtigste davon: Ein Haken,
   * eine Zusage, ein erfuelltes Kriterium darf man sehen.                    */
  --text-success: var(--color-success-700);
  --text-warning: var(--color-warning-700);
  --text-error: var(--color-danger-700);
  --border-error: var(--color-danger-700);

  /* --- Ränder ------------------------------------------------------------ */
  --border-panel: var(--color-black-10); /* durchscheinend: Panels und Karten, auf jedem Grund gleich */
  --border-subtle: var(--color-sand-200);
  --border-interactive: var(--color-sand-400);

  /* --- Statuspillen ------------------------------------------------------ */
  --pill-success-tx: var(--color-success-700);
  --pill-success-bg: var(--color-success-100);
  --pill-warning-tx: var(--color-warning-700);
  --pill-warning-bg: var(--color-warning-100);
  --pill-danger-tx: var(--color-danger-700);
  --pill-danger-bg: var(--color-danger-100);
  --pill-neutral-tx: var(--color-indigo-600);
  --pill-neutral-bg: var(--color-neutral-100);
  --pill-olive-tx: var(--color-olive-500);
  --pill-olive-bg: var(--color-olive-100);
  --pill-coral-tx: var(--color-coral-700);
  --pill-coral-bg: var(--color-coral-100);

  /* --- Feste Zonen (FE-15) ----------------------------------------------- *
   * Behalten in BEIDEN Modi dieselbe Farbe und bringen eigene Textfarben
   * mit. In einer festen Zone ist --text-* verboten: es kippt mit dem Modus
   * und erzeugt genau die Kontrastfehler, die der Styleguide dokumentiert.
   *
   * Ältere Alias-Namen heißen noch deutsch (surface/fest-gruen …) und
   * haben keine Web-Code-Syntax — siehe O-FE-2.                             */
  --surface-fixed-green: var(--color-green-200);
  --surface-fixed-ink: var(--color-indigo-700);
  --on-fixed-green-strong: var(--color-indigo-700); /* 12,06:1 */
  --on-fixed-green-quiet: var(--color-green-700); /*  5,61:1 */
  --on-fixed-green-subtle: var(--color-gray-500);
  --on-fixed-ink-strong: var(--color-white); /* 16,77:1 */
  --on-fixed-ink-quiet: var(--color-indigo-300); /*  7,11:1 */
  --on-fixed-ink-success: var(--color-green-200); /* 12,20:1 */
  --on-fixed-ink-track: var(--color-indigo-600); /* leere Bahn auf Tinte */
  --on-fixed-green-warning: var(--color-warning-800); /*  6,13:1 */
  --on-fixed-white-surface: var(--color-white);
  --shadow-fixed-green: var(--color-green-300);

  /* Der Schatten unter Knöpfen ist in jeder Zone derselbe — er kommt aus dem
     Bedienelement, nicht aus dem Grund. */
  --shadow-control: var(--color-black-25);

  /* Liegt ÜBER dem Bild, nicht daneben — sonst verschiebt sie das Raster. */
  --border-on-media: var(--color-black-15);
  --backdrop: var(--color-black-45);
  --on-white-strong: var(--color-indigo-700); /* Text auf weißem Träger */

  /* --- Metalle (die beiden höchsten Stufen) ------------------------------ *
   * Fest wie die festen Zonen: Gold bleibt Gold, auf jedem Grund und in
   * jedem Modus. Bringen deshalb eigene Text- und Grundfarben mit.
   * Beide Sätze sind gleich aufgebaut, damit eine Komponente nur den Satz
   * wechselt und nicht ihre Regeln.                                         */
  --gold-ground: var(--color-gold-100); /* Fläche im Wappen */
  --gold-sheen: var(--color-gold-300); /* Glanzkante im Verlauf */
  --gold-face: var(--color-gold-500);
  --gold-shade: var(--color-gold-600);
  --gold-ink: var(--color-gold-700); /* 6,55:1 auf --gold-ground */
  --platinum-ground: var(--color-platinum-100);
  --platinum-sheen: var(--color-platinum-300);
  --platinum-face: var(--color-platinum-500);
  --platinum-shade: var(--color-platinum-600);
  --platinum-ink: var(--color-platinum-700); /* 6,55:1 auf --platinum-ground */
}

/* ----------------------------------------------------------------------------
   DUNKELMODUS — Phase 2, bewusst nicht angelegt.

   Hier stünde er, und nur hier: überschrieben werden ausschließlich die
   adaptiven Tokens oben. Die festen Zonen (--surface-fixed-*, --on-fixed-*)
   bleiben unangetastet — genau dafür gibt es sie.

   Ein leerer @media-Block mit TODO wäre schon jetzt totes Gewicht. Die
   Vorarbeit steckt nicht in einer Attrappe, sondern in der Schichtung: Weil
   keine Komponente eine Farbe kennt und keine ein @media enthält (FE-14),
   ist der Dunkelmodus später eine Datei und kein Umbau.

   Bis dahin ist die Oberfläche ausdrücklich hell — deshalb color-scheme
   unten, damit auch Formularelemente und Scrollbalken hell bleiben und nicht
   der Systemeinstellung folgen.
   -------------------------------------------------------------------------- */