/* ============================================================
   VaBond Digital — Design Tokens (Single Source of Truth)
   Marke: Navy #0E2E63 · Lila #7C0F95 · Hellblau #9DCEF9
   Zwei abgestimmte Theme-Sets unter denselben semantischen Namen.
   ============================================================ */

:root {
  /* --- Brand primitives (mode-unabhängig) --- */
  --brand-navy: #0e2e63;
  --brand-purple: #7c0f95;
  --brand-blue: #9dcef9;
  --brand-purple-bright: #b06fd8;
  --brand-blue-bright: #bfe0ff;

  /* --- Radien --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* --- Fluid Type Scale (clamp: min, vw, max) --- */
  --fs-label: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --fs-body-sm: clamp(0.86rem, 0.82rem + 0.2vw, 0.94rem);
  --fs-body: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-lead: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
  --fs-h3: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.8vw, 3.6rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4.4vw, 5.4rem);
  --fs-display: clamp(3.2rem, 1.2rem + 9vw, 9rem);

  /* --- Fluid Spacing --- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --sp-section: clamp(4.5rem, 3rem + 6vw, 9rem);
  --sp-gutter: clamp(1.25rem, 0.8rem + 2.5vw, 3rem);

  /* --- Layout --- */
  --container: 1220px;
  --container-narrow: 860px;

  /* --- Motion --- */
  --dur-fast: 160ms;
  --dur-normal: 320ms;
  --dur-slow: 640ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Fonts --- */
  --font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* --- Elevation shadows (light-mode Basis; dark überschreibt) --- */
  --shadow-sm: 0 1px 2px rgba(14, 46, 99, 0.06), 0 2px 6px rgba(14, 46, 99, 0.05);
  --shadow-md: 0 8px 24px rgba(14, 46, 99, 0.1);
  --shadow-lg: 0 24px 60px rgba(14, 46, 99, 0.14);
}

/* ===================== DARK (Default / Primär) ===================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #05070f;
  --bg-deep: #04060c;
  --surface: #0c1020;
  --surface-2: #12172b;
  --surface-3: #171d36;
  --border: rgba(157, 206, 249, 0.1);
  --border-strong: rgba(157, 206, 249, 0.2);

  --text: #eef1f8;
  --text-soft: #c3cade;
  --text-muted: #8b93a7;

  --accent: #b06fd8;          /* Lila, im Dark heller/leuchtender */
  --accent-2: #9dcef9;        /* Hellblau */
  --accent-ink: #ffffff;      /* Text auf Akzent-Fläche */

  --grad-brand: linear-gradient(120deg, #7c0f95 0%, #9dcef9 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(124, 15, 149, 0.9), rgba(14, 46, 99, 0.9));
  --grad-text: linear-gradient(100deg, #eef1f8 0%, #b06fd8 55%, #9dcef9 100%);

  --glow-purple: rgba(124, 15, 149, 0.5);
  --glow-blue: rgba(157, 206, 249, 0.35);

  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.6);
  --glass: rgba(12, 16, 32, 0.62);
  --grain-opacity: 0.05;
}

/* ===================== LIGHT (abgestimmt, nicht invertiert) ===================== */
[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f5fb;
  --bg-deep: #efedf7;
  --surface: #ffffff;
  --surface-2: #faf9fe;
  --surface-3: #f1eefb;
  --border: rgba(14, 46, 99, 0.1);
  --border-strong: rgba(14, 46, 99, 0.18);

  --text: #0e1428;
  --text-soft: #37406b;
  --text-muted: #6b7280;

  --accent: #7c0f95;          /* Lila, im Light satter/dunkler */
  --accent-2: #0e2e63;
  --accent-ink: #ffffff;

  --grad-brand: linear-gradient(120deg, #7c0f95 0%, #2f6bd6 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(124, 15, 149, 0.08), rgba(157, 206, 249, 0.22));
  --grad-text: linear-gradient(100deg, #0e2e63 0%, #7c0f95 60%, #2f6bd6 100%);

  --glow-purple: rgba(124, 15, 149, 0.18);
  --glow-blue: rgba(47, 107, 214, 0.16);

  --shadow-md: 0 10px 30px rgba(14, 46, 99, 0.1);
  --shadow-lg: 0 28px 70px rgba(14, 46, 99, 0.16);
  --glass: rgba(255, 255, 255, 0.7);
  --grain-opacity: 0.035;
}

/* Reduced-Motion: alle Bewegungen aus, Inhalt sofort sichtbar */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}