:root {
  --void: #020204;
  --void-2: #08080f;
  --void-3: #101018;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.06);
  --glass: rgba(12, 12, 20, 0.72);
  --txt: #f8f9fc;
  --muted: #8b93a8;
  --dim: #5c6478;
  --stroke: rgba(255, 255, 255, 0.08);
  --stroke-bright: rgba(255, 255, 255, 0.16);

  --electric: #5eead4;
  --electric-dim: rgba(94, 234, 212, 0.15);
  --flare: #fb7185;
  --flare-dim: rgba(251, 113, 133, 0.18);
  --volt: #a78bfa;
  --volt-dim: rgba(167, 139, 250, 0.16);
  --gold: #fbbf24;

  --accent: var(--electric);
  --accent-2: var(--flare);
  --accent-soft: var(--electric-dim);
  --success: #34d399;
  --danger: #f87171;

  --bg: var(--void);
  --bg2: var(--void-2);
  --bg-elevated: var(--void-3);
  --card: var(--surface);
  --card-hover: var(--surface-2);
  --shadow: 0 32px 100px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 80px rgba(94, 234, 212, 0.12);

  --r: 20px;
  --r-lg: 28px;
  --r-sm: 12px;
  --r-xl: 36px;
  --wrap: 1280px;
  --sidebar-w: 280px;

  --font-display: "Syne", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Einheitliche Typografie-Skala */
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-display: clamp(2.25rem, 4.5vw, 3.75rem);
  --text-h2: clamp(1.625rem, 2.8vw, 2.125rem);
  --text-h3: 1.125rem;
  --leading-tight: 1.12;
  --leading-body: 1.65;
  --space-section: 88px;
  --space-block: 24px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition: 0.35s var(--ease-out);
}

[data-theme="light"] {
  --void: #faf9f7;
  --void-2: #ffffff;
  --void-3: #f3f1ec;
  --surface: rgba(0, 0, 0, 0.03);
  --surface-2: rgba(0, 0, 0, 0.05);
  --glass: rgba(255, 255, 255, 0.82);
  --txt: #0a0a0f;
  --muted: #5a5f6e;
  --dim: #8b90a0;
  --stroke: rgba(0, 0, 0, 0.08);
  --stroke-bright: rgba(0, 0, 0, 0.14);
  --bg: var(--void);
  --bg2: var(--void-2);
  --bg-elevated: var(--void-3);
  --card: var(--surface);
  --shadow: 0 32px 80px rgba(0, 0, 0, 0.08);
  --shadow-glow: 0 0 60px rgba(94, 234, 212, 0.08);
}