/* =============================================================
   Future Business Club — Design Tokens (Single Source of Truth)
   Ästhetik nach Report-Cover-Screenshot: tiefes Schwarz,
   violett→weiß Punkt-Mesh, dünne elegante Typografie.
   ============================================================= */

:root {
  /* ---------- Primitive: Farben ---------- */
  --black-950: #04050a;   /* Seiten-Hintergrund */
  --black-900: #07080f;
  --black-800: #0b0d16;
  --black-700: #11131e;

  --white-0:   #ffffff;
  --white-50:  #f4f4f8;
  --grey-200:  #d6d5e0;
  --grey-300:  #b7b6c6;
  --grey-400:  #908fa2;
  --grey-500:  #6c6b80;
  --grey-600:  #4a4960;

  /* Mesh-/Akzent-Violett (entsättigt, wie im Screenshot) */
  --violet-200: #cfc6ee;
  --violet-300: #b3a6e2;
  --violet-400: #9d8cdb;   /* Haupt-Akzent */
  --violet-500: #7e6dc2;
  --violet-600: #5d4e98;

  /* ---------- Primitive: Typografie ---------- */
  /* Segoe UI zuerst (echtes Windows-Rendering), Selawik = Microsofts
     offener Segoe-Klon, Open Sans als plattformübergreifender Fallback. */
  --font-display: "Segoe UI", "Selawik", "Open Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Segoe UI", "Selawik", "Open Sans", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ---------- Primitive: Spacing-Skala ---------- */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;  --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem;  --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;   --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  /* ---------- Primitive: Radien / Shadows ---------- */
  --radius-sm: 8px;   --radius-md: 14px;  --radius-lg: 22px;  --radius-pill: 999px;
  --shadow-card: 0 30px 80px -30px rgba(0,0,0,.85), 0 2px 0 0 rgba(255,255,255,.04) inset;
  --shadow-soft: 0 18px 50px -24px rgba(0,0,0,.7);

  /* ---------- Layout-Raster ---------- */
  --maxw: 1320px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* ---------- Semantik (hier dreht Jan) ---------- */
  --bg:            var(--black-950);
  --text:          var(--white-50);
  --text-strong:   var(--white-0);
  --text-muted:    var(--grey-300);
  --text-faint:    var(--grey-500);
  --accent:        var(--violet-400);
  --accent-strong: var(--violet-200);

  --hairline:      rgba(255,255,255,.10);
  --hairline-soft: rgba(255,255,255,.06);

  /* Glas-Karte (Formular) */
  --card-bg:       linear-gradient(158deg, rgba(255,255,255,.060), rgba(255,255,255,.018));
  --card-border:   rgba(255,255,255,.12);
  --field-bg:      rgba(255,255,255,.035);
  --field-border:  rgba(255,255,255,.12);
  --field-focus:   var(--violet-400);

  /* Mesh-Farben (vom mesh.js gelesen) */
  --mesh-white:  232, 230, 244;
  --mesh-violet: 138, 124, 182;

  --transition: 220ms cubic-bezier(.4, 0, .2, 1);
}