:root {
  /* Hintergründe — Schwarz & Charcoal aus dem Logo */
  --bg-deep: #000000;
  --bg-surface: #0a0c10;
  --bg-elevated: #12161e;
  --bg-glass: rgba(10, 12, 16, 0.92);

  /* Logo-Farben */
  --logo-silver: #c8d0dc;
  --logo-chrome: #9aa8ba;
  --logo-steel: #6b8aad;
  --logo-navy: #3d5270;
  --logo-charcoal: #1a1f28;
  --logo-shadow: #2a3544;

  /* Text */
  --text-primary: #e8ecf0;
  --text-secondary: #9aa8ba;
  --text-muted: #6b7a8f;

  /* Akzente — nur Logo-Töne */
  --accent: #6b8aad;
  --accent-hover: #849cbd;
  --accent-muted: #4a6580;

  --border-subtle: rgba(200, 208, 220, 0.1);
  --border-accent: rgba(107, 138, 173, 0.35);
  --border-silver: rgba(200, 208, 220, 0.2);

  /* Buttons — dunkles Lila #3d2e55 */
  --btn-primary-bg: #3d2e55;
  --btn-primary-bg-hover: #4d3d68;
  --btn-primary-border: rgba(200, 180, 232, 0.25);
  --btn-primary-border-hover: rgba(200, 180, 232, 0.45);

  /* Überschriften — Lila-Ton wie Buttons (#3d2e55), lesbar auf dunklem Hintergrund */
  --heading-color: color-mix(in srgb, var(--btn-primary-bg) 60%, #c8b8dc 40%);

  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.5);

  --nav-height: 80px;
  --section-padding: clamp(4rem, 10vw, 7rem);
  --container-width: 1140px;

  --transition-fast: 0.2s ease;
  --transition-smooth: 0.35s ease;
}