/**
 * S4G Design-Tokens — Grundlage fuer alle neu gebauten Seiten.
 *
 * Ebene 1 (--s4g-*) enthaelt die Rohwerte, Ebene 2 (--color-*, --space-* ...)
 * die semantischen Rollen. In Komponenten-CSS wird ausschliesslich Ebene 2
 * benutzt, nie ein Rohwert. Farbquelle: assets/css/default.css :root.
 * Kein !important in dieser Datei und in allen s4g-* Komponenten.
 */
:root {
  /* Ebene 1 — Primitive */
  --s4g-indigo-900: #221F4B;
  --s4g-indigo-800: #2E2B62; /* --c_primary */
  --s4g-indigo-600: #414BB2; /* --c_secondary */
  --s4g-indigo-500: #52539B;
  --s4g-indigo-400: #7980DB;
  --s4g-indigo-300: #7C8DE2; /* --bg_secondary */
  --s4g-indigo-100: #E3E0F7;
  --s4g-indigo-50:  #F3F1FC;
  --s4g-ink-900: #221F4B;
  --s4g-ink-700: #413E6B; /* Fliesstext auf Weiss, Kontrast 9,1:1 */
  --s4g-ink-500: #5F5C82; /* Sekundaertext, 6,0:1 */
  --s4g-ink-400: #6F6C8C; /* Platzhalter, 4,8:1 — nicht heller waehlen */
  --s4g-white: #FFFFFF;
  --s4g-paper: #FAF9FE;   /* --bg_primary */
  --s4g-line:  #E1DEF2;
  --s4g-green-700: #12684A; --s4g-green-50: #E8F6EF; --s4g-green-200: #B7E2CE;
  --s4g-red-700:   #A31D1D; --s4g-red-50:   #FDECEC; --s4g-red-200:   #F3C2C2;

  /* Ebene 2 — Semantik */
  --color-bg: var(--s4g-paper);
  --color-surface: var(--s4g-white);
  --color-surface-invert: var(--s4g-indigo-800);
  --color-text: var(--s4g-ink-900);
  --color-text-muted: var(--s4g-ink-700);
  --color-text-subtle: var(--s4g-ink-500);
  --color-placeholder: var(--s4g-ink-400);
  --color-border: var(--s4g-line);
  --color-focus: var(--s4g-indigo-600);
  --color-action: linear-gradient(to left, #2e2b62 0%, #52539b 42.24%, #7980db 100%);
  --color-on-invert: #FFFFFF;
  --color-on-invert-muted: #CFCBEF;

  --space-1: 4px; --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(34, 31, 75, .06);
  --shadow-md: 0 10px 30px rgba(34, 31, 75, .10);
  --shadow-lg: 0 24px 60px rgba(34, 31, 75, .16);
  --dur-fast: 140ms; --dur-base: 260ms; --dur-slow: 520ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --z-base: 0; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400;
}