:root {
  /* Colors */
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #242736;
  --border: #2e3144;
  --text: #e1e4ed;
  --text-muted: #8b8fa3;
  --accent: #6c7bf7;
  --accent-hover: #5a6ae5;
  --green: #4ade80;
  --red: #f87171;
  --yellow: #fbbf24;
  --blue: #60a5fa;

  /* Surface-2 (alias auf surface2) — Code referenziert var(--surface-2) */
  --surface-2: #242736;

  /* Semantische State-Tokens — fuer Pills, Toasts, Highlights, Validierung.
     Hintergrund = halbtransparente Variante fuer Pills/Cards. Border = volle
     Farbe. Text = passender Kontrast. */
  --state-success:       #4ade80;
  --state-success-bg:    rgba(74, 222, 128, 0.18);
  --state-success-border:rgba(74, 222, 128, 0.55);
  --state-warn:          #fbbf24;
  --state-warn-bg:       rgba(251, 191, 36, 0.18);
  --state-warn-border:   rgba(251, 191, 36, 0.55);
  --state-error:         #f87171;
  --state-error-bg:      rgba(248, 113, 113, 0.18);
  --state-error-border:  rgba(248, 113, 113, 0.55);
  --state-info:          #60a5fa;
  --state-info-bg:       rgba(96, 165, 250, 0.18);
  --state-info-border:   rgba(96, 165, 250, 0.55);
  --state-neutral:       #8b8fa3;
  --state-neutral-bg:    rgba(139, 143, 163, 0.18);
  --state-neutral-border:rgba(139, 143, 163, 0.45);

  /* Focus-Ring — global einheitlich, statt verstreute outline-Definitionen.
     2px solid + 2px offset gibt klare A11y-Sichtbarkeit ohne Layout-Shift. */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  --focus-ring-error: 0 0 0 2px var(--bg), 0 0 0 4px var(--state-error);

  /* "Auf-Akzentfarbe"-Text + "Auf-Warn-Pill"-Text — einheitlich statt
     #fff/#1a1d27 verstreut. Die Token-Variante macht spaetere Theme-Wechsel
     trivial. */
  --on-accent: #fff;
  --on-warn: var(--bg);

  /* Spacing */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 10px;
  --sp-6: 14px;
  --sp-7: 16px;
  --sp-8: 24px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Consolas', 'Monaco', monospace;
  --fs-xs: 9px;
  --fs-sm: 10px;
  --fs-base: 11px;
  --fs-md: 12px;
  --fs-lg: 14px;
  --fs-xl: 15px;
  --fs-2xl: 17px;

  /* Radii */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
  --r-xl: 10px;

  /* Z-index */
  --z-sticky: 2;
  --z-modal: 100;
  --z-context: 150;
  --z-zoom: 200;

  /* Transitions */
  --t-fast: 0.08s;
  --t-normal: 0.15s;

  /* Shadows */
  --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);

  /* Admonition-Farben (Catppuccin-Palette, verwendet im MD-Editor) */
  --adm-note:    #89b4fa;
  --adm-tip:     #a6e3a1;
  --adm-warning: #fab387;
  --adm-danger:  #f38ba8;
  --adm-info:    #74c7ec;

  /* Breakpoints (nur als Dokumentation — @media kann keine CSS-Variablen
     direkt lesen, aber durchgaengige Werte sind so zentral sichtbar).
     Verwendung: @media (max-width: 430px)  -> --bp-mobile-s
                 @media (max-width: 768px)  -> --bp-mobile
                 @media (max-width: 1024px) -> --bp-tablet
                 @media (max-width: 1100px) -> --bp-tablet-wide */
  --bp-mobile-s: 430px;
  --bp-mobile:   768px;
  --bp-tablet:   1024px;
  --bp-tablet-wide: 1100px;
}