/* ============================================================================
   Zonen — der Kern der Modularität (Frontend-Plan § 2, FE-13).

   Nicht die Komponente weiß, auf welchem Grund sie sitzt. Der Grund setzt die
   Variablen um, die Komponente liest sie. Deshalb gibt es KEINE Variante, die
   einen Grund im Namen führt: kein .button--on-green, nie.

   Eine neue Zone = ein Block hier + ein Eintrag im Zonen-Katalog
   (docs/frontend-plan.md § 5) + ein Kontrastbeleg. Null Komponenten.

   --zone-shadow ist der harte 4-px-Versatz unter Panels. Auf Grün und Tinte
   stammt die Farbe aus dem Styleguide (#b5cbab bzw. das ohnehin vorhandene
   --on-fixed-ink-quiet); auf hellem Grund kommt der Versatz aus
   --border-subtle. Der Haarlinien-Rand von Panels und Karten hängt nicht an
   der Zone: --border-panel ist durchscheinendes Schwarz und wirkt auf jedem
   Grund gleich.

   --zone-text-success/-warning/-danger sind die Signalfarben. Sie hängen an der
   Zone, weil #2f6b3f auf Tinte unlesbar wäre und auf Grün im Grund verschwände
   — dieselbe Aussage braucht je Fläche einen anderen Ton.

   --zone-track ist die leere Bahn — Schalter aus, Fortschritt offen, Ring-Rest.
   --zone-success/-warning/-danger-bg/-text sind die gefüllten Tonpaare —
   für Marken, Antwortflächen und Toasts. Auf Grün trägt sie der weiße
   Träger, weil ein grüner Tint im grünen Grund verschwände.

   --zone-carrier-border ist der Rand dieser hellen Fläche. Auf Grün ist er
   laut Styleguide der STARKE Ton (#1c1b32), nicht der leise — die frühere Annahme
   aus der Kontrastnotiz war überholt. Für die übrigen Zonen gibt es im Styleguide
   keinen Chip, dort steht --border-subtle und ist zu bestätigen.

   Die Träger-Tokens (--zone-carrier-*) beschreiben die helle Fläche, die
   Chips und sekundäre Knöpfe mitbringen. Sie sind nötig, weil eine konstant
   weiße Fläche in jeder Zone konstant dunklen Text braucht — auf der
   Tintenzone wäre --zone-text-strong dort weiß auf weiß.

   --zone-card-bg ist die Fläche einer Karte auf dieser Zone. Eine Karte ist
   überall die hellste Fläche: weiß auf dem Panel, weiß auf dem sandfarbenen
   Inhaltsgrund, weiß auf den festen Zonen. Deshalb trägt eine Karte selbst
   nie data-zone — sie liest den Ton der Zone, in der sie steht.
   ========================================================================== */

/* --- Standard: adaptive Fläche, kippt mit dem Modus ----------------------- *
 * Die Staffelung geht von aussen nach innen dunkler und endet weiss:
 * Seitengrund (region) #f3f2ec → Panel (surface) #e8e7de → Karte #ffffff.
 * So hebt sich ein Panel vom Grund ab, ohne eine zweite Kante zu brauchen,
 * und die Karte ist die hellste Fläche — dort steht der Inhalt.            */
[data-zone="surface"],
:root {
  --zone-surface: var(--bg-sunken);
  --zone-text-strong: var(--text-primary);
  --zone-text-quiet: var(--text-secondary);
  --zone-text-subtle: var(--text-muted);
  --zone-border: var(--border-subtle);
  --zone-border-interactive: var(--border-interactive);
  --zone-carrier-bg: var(--bg-surface);
  --zone-carrier-text: var(--text-primary);
  --zone-carrier-border: var(--border-subtle);
  --zone-card-bg: var(--bg-surface);
  --zone-action-bg: var(--bg-accent);
  --zone-action-text: var(--text-on-accent);
  --zone-focus: var(--text-primary);
  --zone-text-success: var(--text-success);
  --zone-text-warning: var(--text-warning);
  --zone-text-danger: var(--text-error);
  --zone-track: var(--border-subtle);
  --zone-success-bg: var(--pill-success-bg);
  --zone-success-text: var(--pill-success-tx);
  --zone-warning-bg: var(--pill-warning-bg);
  --zone-warning-text: var(--pill-warning-tx);
  --zone-danger-bg: var(--pill-danger-bg);
  --zone-danger-text: var(--pill-danger-tx);
  --zone-shadow: var(--border-subtle);
}

/* --- Abgesetzter Bereich: Seitenleiste, Nebenflächen ---------------------- */
[data-zone="region"] {
  --zone-surface: var(--bg-region);
  --zone-text-strong: var(--text-primary);
  --zone-text-quiet: var(--text-secondary);
  --zone-text-subtle: var(--text-muted);
  --zone-border: var(--border-subtle);
  --zone-border-interactive: var(--border-interactive);
  --zone-carrier-bg: var(--bg-surface);
  --zone-carrier-text: var(--text-primary);
  --zone-carrier-border: var(--border-subtle);
  --zone-card-bg: var(--bg-surface);
  --zone-action-bg: var(--bg-accent);
  --zone-action-text: var(--text-on-accent);
  --zone-focus: var(--text-primary);
  --zone-text-success: var(--text-success);
  --zone-text-warning: var(--text-warning);
  --zone-text-danger: var(--text-error);
  --zone-track: var(--border-subtle);
  --zone-success-bg: var(--pill-success-bg);
  --zone-success-text: var(--pill-success-tx);
  --zone-warning-bg: var(--pill-warning-bg);
  --zone-warning-text: var(--pill-warning-tx);
  --zone-danger-bg: var(--pill-danger-bg);
  --zone-danger-text: var(--pill-danger-tx);
  --zone-shadow: var(--border-subtle);
}

/* --- Feste grüne Zone: „Bereich · Heute Abend" ---------------------------- */
[data-zone="green"] {
  --zone-surface: var(--surface-fixed-green);
  --zone-text-strong: var(--on-fixed-green-strong); /* 12,06:1 */
  --zone-text-quiet: var(--on-fixed-green-quiet); /*  5,61:1 */
  --zone-text-subtle: var(--on-fixed-green-subtle);
  --zone-border: var(--on-fixed-green-quiet); /* löst die 1,39:1-Falle */
  --zone-border-interactive: var(--on-fixed-green-quiet);
  --zone-carrier-bg: var(--on-fixed-white-surface);
  --zone-carrier-text: var(--on-fixed-green-strong);
  --zone-carrier-border: var(--on-fixed-green-strong);
  --zone-card-bg: var(--on-fixed-white-surface);
  --zone-action-bg: var(--bg-action-on-highlight);
  --zone-action-text: var(--text-action-on-highlight);
  --zone-focus: var(--on-fixed-green-strong);
  --zone-text-success: var(--on-fixed-green-quiet);
  --zone-text-warning: var(--on-fixed-green-warning);
  --zone-text-danger: var(--text-error);
  --zone-track: var(--shadow-fixed-green);
  --zone-success-bg: var(--on-fixed-white-surface);
  --zone-success-text: var(--pill-success-tx);
  --zone-warning-bg: var(--on-fixed-white-surface);
  --zone-warning-text: var(--pill-warning-tx);
  --zone-danger-bg: var(--on-fixed-white-surface);
  --zone-danger-text: var(--pill-danger-tx);
  --zone-shadow: var(--shadow-fixed-green);
}

/* --- Feste Tintenzone: „Bereich · Bewertung" (M7.1) ----------------------- */
[data-zone="ink"] {
  --zone-surface: var(--surface-fixed-ink);
  --zone-text-strong: var(--on-fixed-ink-strong); /* 16,77:1 */
  --zone-text-quiet: var(--on-fixed-ink-quiet); /*  7,11:1 */
  --zone-text-subtle: var(--on-fixed-ink-quiet);
  --zone-border: var(--on-fixed-ink-quiet);
  --zone-border-interactive: var(--on-fixed-ink-quiet);
  --zone-carrier-bg: var(--on-fixed-white-surface);
  --zone-carrier-text: var(--on-white-strong);
  --zone-carrier-border: var(--border-subtle); /* dunkel, nicht weiß */
  --zone-card-bg: var(--on-fixed-white-surface);
  --zone-action-bg: var(--on-fixed-white-surface);
  --zone-action-text: var(--on-white-strong);
  --zone-focus: var(--on-fixed-ink-quiet);
  --zone-text-success: var(--on-fixed-ink-success);
  --zone-text-warning: var(--pill-warning-bg);
  --zone-text-danger: var(--pill-danger-bg);
  --zone-track: var(--on-fixed-ink-track);
  --zone-success-bg: var(--pill-success-bg);
  --zone-success-text: var(--pill-success-tx);
  --zone-warning-bg: var(--pill-warning-bg);
  --zone-warning-text: var(--pill-warning-tx);
  --zone-danger-bg: var(--pill-danger-bg);
  --zone-danger-text: var(--pill-danger-tx);
  --zone-shadow: var(--on-fixed-ink-quiet); /* FE-35: eigener Ring */
}

/* Jede Zone malt ihre Fläche und setzt ihre Grundtextfarbe selbst. */
[data-zone] {
  background: var(--zone-surface);
  color: var(--zone-text-strong);
}