/* ============================================================================
 * oni-tokens.css — ONIMAI DESIGN TOKENS · SINGLE SOURCE OF TRUTH
 * ----------------------------------------------------------------------------
 * Diese Datei ist die EINE Quelle für Farben, Typografie, Spacing, Radien,
 * Schatten, Motion, Breakpoints & z-index — geteilt von OniCenter UND groupler.
 * Beide Apps laden diese Datei ZUERST (vor app-spezifischem CSS).
 *
 * groupler nutzt eine gespiegelte Kopie (/root/groupler/public/css/oni-tokens.css).
 * Quelle der Wahrheit = diese Datei (onicenter). Bei Änderung beide synchronisieren.
 * Marken-Abweichung von groupler NUR über --brand-accent unten (kein Struktur-Drift).
 * ========================================================================== */
:root{
  /* ── Flächen / Hintergründe (dark) ── */
  --bg:#04050a; --bg-card:#080a13; --bg-glass:rgba(8,10,19,0.85); --bg-surface:#0b0e1b;
  --bg-elev:#0e1222;                      /* erhöhte Fläche (Modals/Popover) */

  /* ── Akzent (Marke) ── */
  --brand-accent:#ff6097;                 /* groupler kann dies überschreiben */
  --accent:var(--brand-accent);
  --accent-dim:rgba(255,96,151,0.18); --accent-glow:rgba(255,96,151,0.35); --accent-b:#d91b5c;
  --storm:#ff8ebb;                        /* heller Akzent / Gradient-Stop */

  /* ── Semantische Farben ── */
  --ok:#3ddc97; --warn:#f0b429; --danger:#ff5b5b; --info:#5ee0ff; --purple:#c084fc; --gold:#fbbf24;
  --ok-dim:rgba(61,220,151,0.12); --warn-dim:rgba(240,180,41,0.12);
  --danger-dim:rgba(255,91,91,0.12); --info-dim:rgba(94,224,255,0.12);

  /* ── Text-Leiter ── */
  --text:#f3f6fc; --text-2:#a2b0d6; --text-3:#4a5775;

  /* ── Linien ── */
  --border:rgba(255,96,151,0.12); --border-h:rgba(255,96,151,0.32); --border-soft:rgba(255,255,255,0.06);

  /* ── Typografie ── */
  --font-d:'Bebas Neue',sans-serif;       /* Display / Headlines */
  --font-b:'Outfit',system-ui,sans-serif; /* Body / UI */
  --font-m:'Space Mono',ui-monospace,monospace; /* Mono / Labels */
  /* Modulare Typo-Skala (1.25) */
  --fs-xs:0.68rem; --fs-sm:0.8rem; --fs-md:0.95rem; --fs-lg:1.2rem; --fs-xl:1.55rem;
  --fs-2xl:2rem; --fs-3xl:2.6rem; --fs-4xl:clamp(2.6rem,5vw,4.2rem);

  /* ── Spacing-Skala (4px-Basis) ── */
  --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;

  /* ── Radien ── */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;

  /* ── Schatten ── */
  --sh-1:0 2px 10px rgba(0,0,0,0.3);
  --sh-2:0 12px 36px rgba(0,0,0,0.4);
  --sh-3:0 24px 70px -18px rgba(0,0,0,0.6);
  --sh-glow:0 8px 28px var(--accent-glow);

  /* ── Motion (respektiert prefers-reduced-motion in oni-ui.css) ── */
  --dur-fast:150ms; --dur-base:220ms; --dur-slow:380ms;
  --ease:cubic-bezier(0.4,0,0.2,1); --ease-out:cubic-bezier(0.22,0.61,0.36,1);

  /* ── Fokus-Ring (A11y) ── */
  --ring:0 0 0 3px rgba(255,96,151,0.45);

  /* ── z-index-Leiter ── */
  --z-base:1; --z-nav:1000; --z-overlay:2000; --z-modal:2100; --z-toast:2200; --z-top:9999;

  /* ── Breakpoints (Referenz; CSS nutzt @media direkt) ── */
  --bp-sm:480px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1380px;
}