:root,
[data-theme="dark"] {
  /* Colors — Swiss Private Banking × Fintech (warm anthracite / muted champagne gold) */
  --color-bg: #0c0b09;
  --color-bg-rgb: 12 11 9;
  --color-surface: #141210;
  --color-surface-rgb: 20 18 16;
  --color-surface-elevated: #1c1914;
  --color-surface-elevated-rgb: 28 25 20;
  --color-primary: #b8a060;
  --color-primary-rgb: 184 160 96;
  --color-primary-light: #d4c08a;
  --color-primary-dark: #96804a;
  --color-accent-muted: rgb(184 160 96 / 0.45);
  --color-text: #f2efe8;
  --color-text-muted: #9a958a;
  --color-text-inverse: #0c0b09;
  --color-border: rgb(184 160 96 / 0.14);
  --color-border-strong: rgb(184 160 96 / 0.28);
  --color-success: #4ade80;
  --color-overlay: rgb(12 11 9 / 0.78);
  --shadow-card: 0 1.25rem 3.5rem rgb(0 0 0 / 0.42), 0 0 0 1px rgb(184 160 96 / 0.08);
  --shadow-glow: 0 0 2.5rem rgb(184 160 96 / 0.35), 0 0.5rem 1.5rem rgb(184 160 96 / 0.15);
  --shadow-elevated: 0 1.75rem 4.5rem rgb(0 0 0 / 0.48), 0 0.5rem 1.5rem rgb(0 0 0 / 0.28), 0 0 0 1px rgb(184 160 96 / 0.1);
  --shadow-subtle: 0 0.75rem 2rem rgb(0 0 0 / 0.32);
  --shadow-ambient: 0 2rem 5rem rgb(0 0 0 / 0.55);
}

[data-theme="light"] {
  /* Colors — warm white / muted gold */
  --color-bg: #f7f4ee;
  --color-bg-rgb: 247 244 238;
  --color-surface: #ffffff;
  --color-surface-rgb: 255 255 255;
  --color-surface-elevated: #f0ebe2;
  --color-surface-elevated-rgb: 240 235 226;
  --color-primary: #96804a;
  --color-primary-rgb: 150 128 74;
  --color-primary-light: #b8a060;
  --color-primary-dark: #7a6838;
  --color-accent-muted: rgb(150 128 74 / 0.4);
  --color-text: #1a1814;
  --color-text-muted: #6b6558;
  --color-text-inverse: #f7f4ee;
  --color-border: rgb(150 128 74 / 0.2);
  --color-border-strong: rgb(150 128 74 / 0.38);
  --color-success: #16a34a;
  --color-overlay: rgb(247 244 238 / 0.88);
  --shadow-card: 0 1.25rem 3rem rgb(26 24 20 / 0.1);
  --shadow-glow: 0 0 2rem rgb(150 128 74 / 0.14);
  --shadow-elevated: 0 1.5rem 3.5rem rgb(26 24 20 / 0.1), 0 0 0 1px rgb(150 128 74 / 0.08);
  --shadow-subtle: 0 0.5rem 1.25rem rgb(26 24 20 / 0.06);
}

:root {
  /* Typography */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --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: clamp(1.5rem, 3vw, 2rem);
  --font-size-3xl: clamp(2rem, 4vw, 3rem);
  --font-size-display: clamp(3rem, 7vw, 5.5rem);
  --line-height-tight: 1.15;
  --line-height-body: 1.65;
  --letter-spacing-wide: 0.12em;
  --letter-spacing-tight: -0.02em;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-section: clamp(6rem, 14vw, 10.5rem);
  --space-gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Layout */
  --max-width: 75rem;
  --max-width-narrow: 42rem;
  --header-height: 4.5rem;

  /* Radius & Shadow */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ambient: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
  --duration-ambient: 32s;

  /* Glass & mesh */
  --glass-bg: rgb(var(--color-surface-rgb) / 0.52);
  --glass-bg-strong: rgb(var(--color-surface-rgb) / 0.68);
  --glass-blur: 14px;
  --glass-border: rgb(var(--color-primary-rgb) / 0.22);
  --mesh-blob-1: rgb(var(--color-primary-rgb) / 0.22);
  --mesh-blob-2: rgb(var(--color-primary-rgb) / 0.14);
  --mesh-blob-3: rgb(80 70 50 / 0.35);

  /* Ambient & depth */
  --ambient-grain-opacity: 0.12;
  --ambient-grid-opacity: 0.06;
  --shadow-inner-glow: inset 0 1px 0 rgb(255 255 255 / 0.05), inset 0 0 0 1px rgb(var(--color-primary-rgb) / 0.07);
  --line-height-display: 1.12;
  --letter-spacing-label: 0.08em;
}

[data-theme="light"] {
  --shadow-inner-glow: inset 0 1px 0 rgb(255 255 255 / 0.85), inset 0 0 0 1px rgb(var(--color-primary-rgb) / 0.1);
  --ambient-grain-opacity: 0.1;
  --ambient-grid-opacity: 0.045;
  --glass-bg: rgb(var(--color-surface-rgb) / 0.72);
  --glass-bg-strong: rgb(var(--color-surface-rgb) / 0.85);
  --mesh-blob-1: rgb(var(--color-primary-rgb) / 0.16);
  --mesh-blob-2: rgb(var(--color-primary-rgb) / 0.1);
  --mesh-blob-3: rgb(150 128 74 / 0.12);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    /* --duration-ambient bewusst NICHT auf 0ms setzen: die Variable steuert nur
       "infinite alternate"-Animationen (Ambient-Hintergrund/Parallax-Blobs), und eine
       Animation mit 0ms Dauer + infinite alternate lässt den Browser bei jedem Frame
       sofort zwischen Start- und Endzustand hin-und-herspringen — das erzeugte genau
       das gemeldete Flackern. Die eigentliche Abschaltung für reduced-motion passiert
       stattdessen gezielt je Element über "animation: none" (siehe .ambient-bg__gradient/
       .ambient-bg__blob in dashboard.css/components.css und .section--ambient::after
       hier in base.css) statt über diese globale Variable. */
  }
}