/* AuroraVerse — Design Tokens · Stand 2026-10-14
   Quelle: design/source/AuroraVerse Designsystem v2.dc.html (Kap. C + F).
   Zwei Ebenen: Basis (--violet-900 …) und Rolle (--bg-inverse …).
   Komponenten referenzieren NUR Rollen. Bereiche schalten über [data-brand] nur --area-*.
   Ersetzt das Starter-Set vom 2026-06-20 (Indigo #4F46E5 / Geist). */

:root {
  /* ── Basis: Farbe ─────────────────────────────────────────── */
  --violet-950: #1E1530;  /* Nachtviolett */
  --violet-900: #2E2045;  /* Dunkelviolett — Markenfarbe (bestätigt) */
  --violet-700: #5A3D8A;  /* Violett tief */
  --violet-600: #724FA9;  /* Violett — Markenfarbe (bestätigt) */
  --violet-300: #A88BE0;  /* Violett hell */
  --violet-100: #EEE8F7;  /* Violett Hauch */
  --pink-300:   #FF92FF;  /* Markenfarbe (bestätigt) — nie Text auf Hell */
  --pink-700:   #A12E9B;
  --mint-300:   #77FFAD;  /* Markenfarbe (bestätigt) — nie Text auf Hell */
  --mint-700:   #12754A;
  --neutral-0:   #FCFBFE; /* Papier */
  --neutral-100: #F5F2FA; /* Nebel */
  --neutral-200: #E3DDEC; /* Linie */
  --neutral-300: #CBC2DA; /* Linie stark */
  --neutral-700: #4E4563; /* Text gedämpft */
  --white:       #FFFFFF;
  --inverse-50:  #F4F0FA;
  --red-700:     #B42318;
  --amber-700:   #8A5A00;

  /* ── Rollen: Flächen & Text ───────────────────────────────── */
  --bg-page:    var(--neutral-0);
  --bg-subtle:  var(--neutral-100);
  --bg-surface: var(--white);
  --bg-inverse: var(--violet-900);
  --text-primary: var(--violet-950);   /* 15,8:1 */
  --text-muted:   var(--neutral-700);  /* 8,9:1 */
  --text-inverse: var(--inverse-50);
  --text-link:    var(--violet-700);
  --accent-brand:         var(--violet-600);  /* Fokus, Linien, Marker */
  --accent-highlight:     var(--pink-300);    /* Akzente auf Dunkel, Verlauf */
  --accent-action-inverse: var(--mint-300);   /* Primary-Button auf Dunkel */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--violet-900);
  --status-success: var(--mint-700);   /* „Im Einsatz" */
  --status-warning: var(--amber-700);  /* „In Finalisierung" */
  --status-error:   var(--red-700);
  --status-info:    var(--violet-700); /* „In Planung" */

  /* ── Verlauf (nur Linie 2–4 px, Fortschritt, Lichtschein; max. 1× prominent je Ansicht) ── */
  --gradient-aurora: linear-gradient(90deg, #E688F0 0%, #9B63C1 50%, #77FFAD 100%);
  --gradient-aurora-v: linear-gradient(180deg, #E688F0 0%, #9B63C1 50%, #77FFAD 100%);
  --gradient-glow: radial-gradient(closest-side, rgba(255,146,255,.28), transparent);

  /* ── Typografie ───────────────────────────────────────────── */
  --font-sans: "Jost", system-ui, sans-serif;            /* 300/400/500 — nie 700 */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;  /* 400/500 — nur Kennungen/Status */
  --fs-display: clamp(40px, 2.4rem + 3.6vw, 72px);  --lh-display: 1.06;
  --fs-h1:      clamp(34px, 1.9rem + 1.3vw, 48px);  --lh-h1: 1.1;
  --fs-h2:      clamp(28px, 1.6rem + .75vw, 36px);  --lh-h2: 1.15;
  --fs-h3:      clamp(21px, 1.25rem + .3vw, 24px);  --lh-h3: 1.25;
  --fs-h4:      clamp(18px, 1.1rem + .1vw, 19px);   --lh-h4: 1.35;
  --fs-body-lg: clamp(18px, 1.05rem + .2vw, 20px);  --lh-body-lg: 1.55;
  --fs-body:    17px;  --lh-body: 1.6;
  --fs-body-sm: 15px;  --lh-body-sm: 1.5;
  --fs-label:   clamp(12px, .72rem + .1vw, 13px);   --lh-label: 1.4;

  /* ── Abstände (4-px-Basis) ────────────────────────────────── */
  --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-gap: var(--space-10);

  /* ── Breiten ──────────────────────────────────────────────── */
  --width-page: 1240px; --width-content: 960px; --width-text: 68ch;
  --gutter: 24px; --edge: 32px;

  /* ── Radien (weiche Bögen des Symbols) ────────────────────── */
  --radius-sm: 12px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 32px; --radius-pill: 999px;

  /* ── Schatten (Standard ist Kontur, nicht Schatten) ───────── */
  --shadow-sm: 0 1px 2px rgba(46,32,69,.08);
  --shadow-md: 0 6px 18px -6px rgba(46,32,69,.18);
  --shadow-lg: 0 18px 44px -12px rgba(46,32,69,.28);

  /* ── Fokus ────────────────────────────────────────────────── */
  --focus-ring: 3px solid var(--violet-600);
  --focus-ring-inverse: 3px solid var(--pink-300);

  /* ── Bewegung ─────────────────────────────────────────────── */
  --motion-fast: 120ms; --motion-base: 220ms; --motion-slow: 480ms;
  --ease-standard: cubic-bezier(.2,.7,.2,1);

  /* ── Bereich (Default = Dach) ─────────────────────────────── */
  --area-accent: var(--violet-600); --area-tint: var(--violet-100); --area-text: var(--violet-700);
}

@media (max-width: 639px) {
  :root { --section-gap: var(--space-8); --gutter: 16px; --edge: 20px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  :root { --gutter: 20px; --edge: 24px; }
}

/* Bereichsakzente: accent = Marker/Linien/Icons auf Dunkel · tint = Flächen · text = Schrift auf Hell (≥ 4,5:1) */
[data-brand="consulting"]  { --area-accent: #724FA9; --area-tint: #EEE8F7; --area-text: #5A3D8A; }
[data-brand="development"] { --area-accent: #77FFAD; --area-tint: #E3FBEE; --area-text: #12754A; }
[data-brand="social"]      { --area-accent: #FF92FF; --area-tint: #FDEBFD; --area-text: #A12E9B; }
[data-brand="ai"]          { --area-accent: #8FA2FF; --area-tint: #E9ECFF; --area-text: #3D4FB8; }
[data-brand="academy"]     { --area-accent: #FFC46B; --area-tint: #FFF3DE; --area-text: #8A5A00; }