:root{
/* ================= coachBOB Farbsystem v3 · „Orange · Espresso · Sand" =================
   Quelle: explorations/Farbsystem Orange-Espresso-Sand v3.html (freigegebene Exploration).
   Token-NAMEN sind stabil gehalten (Komponenten-Kompatibilität); die WERTE sind v3.
   Merksatz: Weiß trägt die Seite · Sand strukturiert · Orange signalisiert · Espresso ist Schrift/Detail. */

/* ---- Neutral = Sand-Skala (warm) + Espresso als Ink ---- */
--neutral-0:oklch(100% 0 0);/* Weiß — Seitenfläche, Lese- und Eingabeflächen */
--neutral-50:oklch(97% 0.012 85);/* Sand 50 — Feldfüllung, Inaktiv, Zebra, Flyer-Grund */
--neutral-100:oklch(94.5% 0.02 84);/* Sand 100 — gruppieren: Hero, eine Zone pro Abschnitt, Karten */
--neutral-150:oklch(89% 0.032 80);/* Sand 200 — nur Marker: Hover, Input auf Sand, Slider-Bahn */
--neutral-200:oklch(83% 0.04 78);/* Sand 300 — Linien, dekorative Rahmen, 5. Diagrammserie */
--neutral-300:oklch(74% 0.03 72);/* tiefes Sand — disabled text */
--neutral-400:oklch(62% 0.02 60);/* Border-Grau — Standard-Formularrahmen, 3,65:1 auf Weiß */
--neutral-500:oklch(56% 0.03 60);/* gedämpft — Platzhalter, Inaktiv-Schrift */
--neutral-600:oklch(45% 0.012 60);/* Meta-Grau — NUR Bildunterschriften, Zeitstempel, Fußnoten. Fließtext ist immer Espresso (900) */
--neutral-700:oklch(36.5% 0.016 58);
--neutral-800:oklch(28% 0.022 50);
--neutral-900:oklch(23% 0.026 48);/* Espresso #271912 — DIE Textfarbe + Akzent (Icons, Linien, Fortschritt); nie großflächig */

/* ---- Physical track = Brand-Orange (Signal) ---- */
--physical-50:oklch(97% 0.015 50.9);
--physical-100:oklch(88% 0.06 55);/* Orange 100 (Tint) — NUR Auswahl-Zustand, mit 700er Schrift */
--physical-200:oklch(80% 0.095 62);/* Orange 200 — Schrift/Links auf Espresso (9,5:1), Fokusring, Negativwerte in Diagrammen */
--physical-300:oklch(71.6% 0.091 50.9);
--physical-400:oklch(63.5% 0.114 50.9);
--physical-500:oklch(55.76% 0.127 50.3);/* exact brand anchor #AD5A23 — Fläche/Signal, immer mit Weißschrift */
--physical-600:oklch(44% 0.105 47);/* Orange 600 — Schrift/Links auf hell (7,8:1) + Hover */
--physical-700:oklch(36.5% 0.095 46);/* Orange 700 — Aktiv/gedrückt + Schrift auf Orange-Tint */
--physical-800:oklch(28.9% 0.083 46.9);
--physical-900:oklch(22% 0.057 44.9);

/* ---- Mental track (indigo-violet — calm, mind) ---- */
--mental-50:oklch(97% 0.023 282.1);
--mental-100:oklch(92.3% 0.051 282.1);/* Lavendel-Tint — Mental-Pillen-Grund, BOB-Gelenkringe */
--mental-200:oklch(84% 0.091 282.1);
--mental-300:oklch(74.6% 0.136 282.1);
--mental-400:oklch(67.5% 0.17 282.1);
--mental-500:oklch(59.73% 0.1858 282);/* exact brand anchor #726AE9 — Mental-Inhalt, Logo, 3. Diagrammserie */
--mental-600:oklch(47.6% 0.187 281.1);
--mental-700:oklch(38.8% 0.164 280.1);/* Mental 700 — Schrift UND Punkt in Mental-Pillen (Punkt = Schriftton) */
--mental-800:oklch(29.9% 0.125 278.1);
--mental-900:oklch(22% 0.085 276.1);

/* ---- Semantic: success (erlaubt) / alert (nicht erlaubt) — nie Fläche allein, immer Icon + Text ---- */
--success-50:oklch(95.5% 0.035 152);
--success-100:oklch(91% 0.06 152);
--success-300:oklch(76% 0.1 151);
--success-500:oklch(58% 0.115 150);
--success-700:oklch(40% 0.09 150);
--success-900:oklch(24% 0.05 150);

--alert-50:oklch(95.5% 0.03 22);
--alert-100:oklch(91% 0.06 21);
--alert-300:oklch(76% 0.12 20);
--alert-500:oklch(56% 0.19 19);/* nur Rahmen + Schrift + Icon, nie gefüllte Fläche neben Orange */
--alert-700:oklch(40% 0.16 18);
--alert-900:oklch(25% 0.09 18);

/* ---- Flächenrollen (v3): Weiß ~60 % · Sand ~25 % · Orange ≤ 10 % · Espresso ≤ 5 % ---- */
--surface-page:var(--neutral-0);/* Seite = Weiß (Greige gestrichen) */
--surface-card:var(--neutral-0);
--surface-raised:var(--neutral-0);
--surface-fill:var(--neutral-100);/* Sand 100 — gruppieren */
--surface-fill-soft:var(--neutral-50);/* Sand 50 — füllen */
--surface-marker:var(--neutral-150);/* Sand 200 — markieren */
--surface-sunken:var(--neutral-100);
--surface-inverse:var(--neutral-900);/* nur kleinste Flächen: Footer-Copyright-Zeile, Objekte unter Postkartengröße */
--surface-overlay:oklch(23% 0.026 48 / 0.5);

/* borders — Sand 300 trennt (dekorativ), der dunkle Rahmen bedeutet etwas (Formulare) */
--border-subtle:var(--neutral-200);
--border-default:var(--neutral-200);
--border-strong:var(--neutral-400);

/* text — EIN Fließtext-Ton: Espresso. Grau nur für Meta-Zeilen */
--text-primary:var(--neutral-900);
--text-secondary:var(--neutral-600);
--text-muted:var(--neutral-500);
--text-disabled:var(--neutral-300);
--text-inverse:var(--neutral-0);
--text-on-brand:var(--neutral-0);/* auf Orange 500 ist Weiß die einzige Schrift */
--text-on-dark:var(--physical-200);/* Akzente/Links auf Espresso */
--text-link:var(--physical-600);
--text-link-hover:var(--physical-700);

/* focus — Ring Orange 600 auf Weiß und Sand (8,1:1 / 6,9:1), Orange 200 auf Espresso (8,9:1). Geändert 27.09.2026 (E78): Orange 200 auf Weiß hatte nur 1,9:1 */
--focus-ring:var(--physical-600);
--focus-ring-on-fill:var(--physical-600);
--focus-ring-on-dark:var(--physical-200);

/* track: physical — 500 = Fläche mit Weißschrift; 600 = Hover + Schrift auf hell; 700 = Aktiv + Schrift auf Tint */
--text-physical:var(--physical-700);
--icon-physical:var(--physical-500);
--surface-physical:var(--physical-500);
--surface-physical-strong:var(--physical-600);
--surface-physical-subtle:var(--physical-50);
--surface-physical-tint:var(--physical-100);
--border-physical:var(--physical-300);
--accent-physical:var(--physical-500);

/* track: mental */
--text-mental:var(--mental-700);
--icon-mental:var(--mental-700);/* Punkt = Schriftton (v3) */
--surface-mental:var(--mental-500);
--surface-mental-strong:var(--mental-600);
--surface-mental-subtle:var(--mental-50);
--surface-mental-tint:var(--mental-100);
--border-mental:var(--mental-300);
--accent-mental:var(--mental-500);

/* semantic: status */
--text-success:var(--success-700);
--surface-success:var(--success-500);
--surface-success-subtle:var(--success-50);
--border-success:var(--success-300);

--text-alert:var(--alert-700);
--surface-alert:var(--alert-500);
--surface-alert-subtle:var(--alert-50);
--border-alert:var(--alert-300);

/* brand accents — Zustandskette 500 → 600 (Hover, + Schatten) → 700 (gedrückt, + inset) */
--brand-ink:var(--neutral-900);
--brand-primary:var(--physical-500);
--brand-primary-hover:var(--physical-600);
--brand-active:var(--physical-700);
--brand-on-dark:var(--physical-200);
--brand-secondary:var(--mental-500);/* nur Track-Aktion Mental (Button track=mental), nie allgemeiner Zustand (27.09.2026, E78) */
--brand-secondary-hover:var(--mental-600);/* dito: Mental ist nie Zustandsfarbe, Hover/gedrückt/ausgewählt/Fokus sind Orange oder Espresso */
--state-selected:var(--physical-100);/* Auswahl: Tint-Fläche… */
--text-selected:var(--physical-700);/* …mit 700er Schrift, auf Kacheln zusätzlich Orange-Rahmen */

/* Marken-Verlauf — NUR klein: Linie/Kante, Logo-Kreis, kleine Kachel (QR). Nie Hero-, Banner- oder Kartenfläche */
--brand-gradient:linear-gradient(135deg,#C46A2C,#AD5A23 45%,#726AE9);/* @kind other */

/* Diagramm-Serienfolge (fix, max. 5 Serien; auch in Graustufen unterscheidbar) */
--chart-1:var(--physical-500);
--chart-2:var(--neutral-900);
--chart-3:var(--mental-500);
--chart-4:var(--physical-200);/* + Negativwerte (Wasserfall) */
--chart-5:var(--neutral-200);

/* ---- Gold: als eigener Buntton in v3 GESTRICHEN — Aliase bleiben für Kompatibilität und zeigen in die Orange-Familie ---- */
--accent-gold-subtle:var(--physical-50);
--accent-gold:var(--physical-300);
--accent-gold-strong:var(--physical-700);
--on-accent-gold:var(--neutral-900);

/* ---- Website (Marketing) — Rollen-Aliase, keine eigenen Farben. Rhythmus: Sand-Hero → Weiß → schmales Espresso-Band → Weiß ---- */
--website-bg:var(--neutral-0);
--website-bg-alt:var(--neutral-100);/* Sand 100 — EINE Zone pro Abschnitt, kein Sand-Stapel */
--website-bg-deep:var(--neutral-900);/* nur schmale Bänder (Zitat, Copyright) — nie Seitenfläche */
--website-surface:var(--surface-card);
--website-border:var(--border-subtle);
--website-heading:var(--text-primary);
--website-body:var(--text-primary);/* ein Fließtext-Ton (v3) */
--website-text-on-deep:var(--neutral-0);
--website-text-muted-on-deep:var(--neutral-100);/* Sand auf Espresso, 14,4:1 — auch die Mail-Adresse */
--website-cta-bg:var(--brand-primary);
--website-cta-bg-hover:var(--brand-primary-hover);
--website-cta-text:var(--text-on-brand);
--website-link:var(--text-link);
--website-link-hover:var(--text-link-hover);
--website-highlight-bg:var(--surface-physical-tint);
--website-highlight-text:var(--text-physical);
--website-fill-alt:var(--surface-mental-tint);
--website-fill-alt-strong:var(--mental-700);
}