/* ============================================================
   GhostSites — Design-Tokens
   Quelle: GhostSuite-Familien-CI (MARKE.md, Brand Guide v1.1)
   Regel: Komponenten konsumieren NUR Funktions-Tokens (--surface,
   --ink, --accent …), nie Rohwerte. Änderungen laufen immer über
   diese Datei — nie als Sonderlocke in einer Seite.
   ============================================================ */

:root {
  /* ---- Rohwerte der Familie (nicht direkt verwenden) ---- */
  --raw-ink-black: #09090f;
  --raw-deep-night: #13121f;
  --raw-surface-night: #1a1a2e;
  --raw-night-2: #1e1e36;
  --raw-night-3: #24243e;
  --raw-paper: #f5f4f9;
  --raw-v-50: #f0e6ff;
  --raw-v-100: #ede9fe;
  --raw-v-300: #c4b5fd;
  --raw-v-500: #a78bfa;
  --raw-v-700: #7c5cd6;

  /* ---- Flächen ---- */
  --bg: var(--raw-deep-night);              /* Seitengrund */
  --bg-deep: var(--raw-ink-black);          /* tiefste Ebene (Hero-Void, Footer) */
  --surface: var(--raw-surface-night);      /* Sektionen, Standardfläche */
  --surface-2: var(--raw-night-2);          /* Karten */
  --surface-3: var(--raw-night-3);          /* gehobene Karten, Verlaufs-Mitte */
  --paper: var(--raw-paper);                /* helle Anwendungen (Dokumente) */

  /* ---- Text ---- */
  --ink: #f4f1ff;                           /* Primärtext */
  --ink-muted: rgba(244, 241, 255, .58);    /* Sekundärtext (AA auf --surface: 5.8:1) */
  --ink-dim: rgba(244, 241, 255, .34);      /* nur Deko/Disabled, NICHT für Inhalte */
  --ink-on-accent: var(--raw-ink-black);    /* Text auf Akzentfläche (7.3:1) */

  /* ---- Akzent (Violett-Geist) ---- */
  --accent: var(--raw-v-500);               /* Ghost Violet — Links, CTAs (6.3:1 auf --surface) */
  --accent-soft: var(--raw-v-300);          /* Mist — Hover, sekundäre Auszeichnung */
  --accent-strong: var(--raw-v-700);        /* Deep Violet — nur auf hellen Flächen */
  --accent-halo: var(--raw-v-100);          /* Halo — Auszeichnungstext auf dunkel */
  --gradient-ghost: linear-gradient(135deg, #f0e6ff, #c4b5fd 55%, #a78bfa);

  /* ---- Status ---- */
  --success: #34d399;                       /* 8.9:1 auf --surface */
  --error: #f87171;                         /* 6.2:1 auf --surface */

  /* ---- Glas & Linien ---- */
  --glass: rgba(237, 233, 254, .045);
  --glass-warm: rgba(237, 233, 254, .08);
  --line: rgba(196, 181, 253, .16);
  --line-strong: rgba(196, 181, 253, .42);
  --blur-glass: blur(22px) saturate(140%);

  /* ---- Typografie ---- */
  --font-display: 'Unbounded', 'Arial Black', sans-serif;   /* nie Fließtext */
  --font-body: 'Fraunces', Georgia, serif;
  --font-mono: 'DM Mono', ui-monospace, 'Courier New', monospace; /* Labels, Zahlen, Preise */

  --text-display: clamp(2.2rem, 1.1rem + 4.8vw, 4.25rem);   /* Hero-H1 */
  --text-h2: clamp(1.55rem, 1.15rem + 1.8vw, 2.35rem);
  --text-h3: clamp(1.15rem, 1rem + .7vw, 1.45rem);
  --text-lead: clamp(1.06rem, 1rem + .35vw, 1.25rem);
  --text-body: 1.0625rem;
  --text-small: .875rem;
  --text-label: .6875rem;                    /* immer Versalien + --tracking-label */

  --tracking-display: -0.02em;
  --tracking-label: .22em;
  --leading-tight: 1.08;
  --leading-body: 1.7;

  /* ---- Spacing (4er-Raster) ---- */
  --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;
  --section-y: clamp(64px, 12vh, 128px);     /* vertikaler Sektions-Rhythmus */

  /* ---- Layout ---- */
  --container: 1080px;                       /* Standard (wie Brand Guide) */
  --container-wide: 1280px;                  /* Showcase/Full-Karten */
  --container-text: 640px;                   /* Lesespalte */
  --gutter: clamp(20px, 5vw, 56px);
  /* Breakpoints (Doku, in Media Queries als Zahl verwenden):
     480px schmal · 768px Tablet · 1024px Desktop · 1440px groß */

  /* ---- Radius ---- */
  --radius-s: 8px;
  --radius-m: 14px;                          /* Karten (Brand-Guide-Wert) */
  --radius-pill: 999px;

  /* ---- Schatten & Glow ---- */
  --glow-accent: 0 0 40px rgba(167, 139, 250, .18);
  --glow-soft: 0 2px 24px rgba(109, 68, 200, .14);
  --shadow-card: 0 12px 40px rgba(9, 9, 15, .5);

  /* ---- Motion ---- */
  --ease-brand: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: .18s;                          /* Hover, Fokus */
  --dur-base: .4s;                           /* Einblendungen, Zustandswechsel */
  --dur-slow: .8s;                           /* Szenen, Geist-Bewegung */
}

/* Basisverhalten, das jede Seite der Marke erbt */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin: 0;
  overflow-x: clip; /* Pflicht: erlaubt Full-Bleed-Akzente per calc(50% - 50vw) ohne Scrollbalken */
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--ink-on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}