@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     STLMaid Web-Design-Tokens
     Abgestimmt auf die App (Theme/Colors.xaml): kuehles, neutrales
     Charcoal (KEIN Lila), weiches Marken-Cyan, flach statt Neon-Glow.
     ============================================================ */

  /* Background Colors — kuehler Charcoal-Ramp (wie App-Surfaces) */
  --bg-primary: #15181c;
  --bg-secondary: #1c2127;
  --bg-card: #242b33;
  --bg-card-hover: #2d3640;
  --bg-nav: rgba(21, 24, 28, 0.85);
  --bg-nav-scrolled: rgba(21, 24, 28, 0.96);

  /* Accent Colors — Marken-Cyan (weicher als Neon) + Rot */
  --accent-cyan: #25cad8;
  --accent-cyan-dim: #1aa9b6;
  --accent-cyan-glow: rgba(37, 202, 216, 0.22);
  --accent-cyan-glow-strong: rgba(37, 202, 216, 0.35);
  --accent-red: #e5484d;
  --accent-red-dim: #c23a3e;
  --accent-red-glow: rgba(229, 72, 77, 0.22);

  /* On-Accent: dunkler Text auf Cyan-Fuellung (wie App OnAccentBrush) */
  --on-accent: #06262a;

  /* Text Colors */
  --text-primary: #e4e7ea;
  --text-secondary: #98a0a8;
  --text-heading: #ffffff;
  --text-muted: #6b7580;

  /* Border */
  --border-subtle: #333b45;
  --border-accent: rgba(37, 202, 216, 0.25);

  /* Shadows — FLACH statt Neon. Die --glow-* bleiben als Variablen
     bestehen (viele Stellen nutzen sie), liefern aber jetzt nur noch
     eine dezente dunkle Elevation, kein Cyan-Leuchten. */
  --glow-cyan: 0 2px 14px rgba(0, 0, 0, 0.30);
  --glow-cyan-strong: 0 6px 22px rgba(0, 0, 0, 0.42);
  --glow-red: 0 2px 14px rgba(0, 0, 0, 0.30);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 8px 26px rgba(0, 0, 0, 0.45);

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Monospace fuer technische Metadaten/Labels (Engineering-Anmutung) */
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3.5rem;
  --line-height-tight: 1.2;
  --line-height-base: 1.6;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Layout */
  --max-width: 1200px;
  --nav-height: 70px;
  --border-radius: 8px;
  --border-radius-lg: 12px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;
}