:root {
  /* === BRAND PALETTE === */
  /* Dark surfaces (hero, dark sections) */
  --dark-bg:       #0F1117;
  --dark-bg-soft:  #161B26;
  --dark-fg:       #F2F2F0;
  --dark-muted:    #8A8FA8;

  /* Light surfaces (body pages) */
  --bg-0: #F5F6F8;
  --bg-1: #ECEEF1;
  --bg-2: #E3E5E9;
  --bg-glass: rgba(245, 246, 248, 0.80);
  --bg-glass-strong: rgba(245, 246, 248, 0.95);

  /* Text on light */
  --fg:       #1A1A2E;
  --fg-muted: #4A4A6A;
  --fg-dim:   #8A8FA8;

  /* Gold accent */
  --accent:          #C9A84C;
  --accent-hover:    #E8C56A;
  --accent-soft:     rgba(201, 168, 76, 0.12);
  --accent-glow:     0 8px 32px -8px rgba(201, 168, 76, 0.45);

  /* Supporting accents (subtle use only) */
  --accent-blue:   #1E3A6E;
  --accent-violet: #2D1B69;

  --border:       rgba(26, 26, 46, 0.08);
  --border-strong: rgba(26, 26, 46, 0.16);
  --border-gold:  rgba(201, 168, 76, 0.30);

  /* Gradients */
  --grad-gold:    linear-gradient(135deg, #C9A84C 0%, #E8C56A 100%);
  --grad-dark:    linear-gradient(135deg, #0F1117 0%, #161B26 100%);
  --grad-text:    linear-gradient(135deg, #C9A84C 0%, #E8C56A 60%, #F5D98A 100%);
  --grad-soft:    rgba(201, 168, 76, 0.08);
  --grad-primary: var(--grad-gold);
  --grad-btn:     var(--grad-gold);

  /* Backwards-compat aliases used in components */
  --accent-cyan:        var(--accent);
  --accent-cyan-soft:   var(--accent-soft);
  --accent-violet:      #2D1B69;
  --accent-violet-soft: rgba(45, 27, 105, 0.12);
  --accent-lime:        #2D7A4A;
  --accent-pink:        #8B3A5A;

  --shadow-glow-cyan:   var(--accent-glow);
  --shadow-glow-violet: 0 12px 32px -12px rgba(45, 27, 105, 0.35);
  --shadow-card:        0 14px 40px -18px rgba(26, 26, 46, 0.12), 0 2px 6px -2px rgba(26, 26, 46, 0.05);
  --shadow-card-hover:  0 22px 60px -22px rgba(26, 26, 46, 0.18), 0 4px 12px -2px rgba(26, 26, 46, 0.06);

  /* Legacy space vars (used in page-transition canvas) */
  --space-bg: #0F1117;
  --space-fg: #F2F2F0;
  --space-muted: #8A8FA8;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 192px;

  /* Border-radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* Typography */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-mono: 12px;
  --fs-body: clamp(15px, 0.95vw + 11px, 17px);
  --fs-lead: clamp(18px, 0.7vw + 15px, 23px);
  --fs-h3:   clamp(21px, 0.9vw + 17px, 28px);
  --fs-h2:   clamp(32px, 2.6vw + 18px, 60px);
  --fs-h1:   clamp(40px, 5vw + 22px, 96px);
  --fs-hero: clamp(44px, 6vw + 20px, 112px);
  /* Riesige Statement-Zeilen (wimpdecaf-Stil): eine pro Seite, mehr nicht */
  --fs-statement: clamp(36px, 4.6vw + 16px, 92px);

  --lh-tight:  1.05;
  --lh-snug:   1.18;
  --lh-normal: 1.55;

  --container:        1280px;
  --container-narrow: 880px;
  --container-reader: 720px;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-fast: 200ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;

  --nav-h:    72px;
  --z-bg:     0;
  --z-base:   1;
  --z-nav:    50;
  --z-overlay: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}