/* ─────────────────────────────────────────────────────────────
   Fahrora Design Tokens v2 — Premium Operativ
   Single source of truth for Office-Cockpit + Fahrlehrer-App
   Drop-in. No build step. CSS Custom Properties only.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── FOUNDATION ──────────────────────────────────────────── */
  --ink-deep:    #0a0a0a;            /* page bg */
  --ink-soft:    #11111a;            /* surface 1 */
  --ink-rise:    #18181f;            /* surface 2 (cards, modals) */
  --ink-rise-2:  #1d1d26;            /* surface 3 (hover, nested) */
  --ink-line:    rgba(255,255,255,0.06);
  --ink-line-2:  rgba(255,255,255,0.10);
  --ink-line-3:  rgba(255,255,255,0.16);

  /* ── TEXT ────────────────────────────────────────────────── */
  --bone:        #ededed;            /* primary */
  --bone-soft:   #a1a1aa;            /* secondary */
  --bone-muted:  #6b6b75;            /* tertiary */
  --bone-faint:  #4a4a55;            /* placeholder */

  /* ── ACCENT — Stripe-Indigo. Techy, 2030, B2B-coded. */
  --accent:      #635bff;
  --accent-hi:   #7a73ff;            /* hover */
  --accent-lo:   #4f47e6;            /* active */
  --accent-soft: rgba(99,91,255,0.14);
  --accent-line: rgba(99,91,255,0.34);
  --accent-glow: rgba(99,91,255,0.28);
  --accent-ink:  #ffffff;            /* text on accent fill */

  /* ── STATUS — minimal, sparingly ─────────────────────────── */
  --ok:          #4ade80;
  --warn:        #facc15;
  --err:         #ef4444;
  --info:        #60a5fa;
  --ok-soft:     rgba(74,222,128,0.10);
  --warn-soft:   rgba(250,204,21,0.10);
  --err-soft:    rgba(239,68,68,0.10);
  --info-soft:   rgba(96,165,250,0.10);
  --ok-line:     rgba(74,222,128,0.28);
  --warn-line:   rgba(250,204,21,0.28);
  --err-line:    rgba(239,68,68,0.28);

  /* ── TYPE ────────────────────────────────────────────────── */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  14px;
  --text-md:    15px;
  --text-lg:    18px;
  --text-xl:    20px;
  --text-2xl:   24px;
  --text-3xl:   30px;
  --text-4xl:   36px;
  --text-5xl:   48px;

  --tracking-tight:   -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.10em;
  --tracking-widest:   0.18em;

  /* ── SPACING — 4 px grid ─────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── RADIUS ──────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ── ELEVATION ───────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.32);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.45);
  --shadow-xl:   0 24px 56px rgba(0,0,0,0.55);
  --shadow-glow: 0 0 0 1px var(--accent-line), 0 0 24px var(--accent-glow);

  /* ── MOTION ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 100ms;
  --dur-2: 200ms;
  --dur-3: 300ms;
  --dur-4: 500ms;
}

/* ── BACKWARDS-COMPAT — old neon tokens map to new system ── */
:root {
  --bg-black: var(--ink-deep);
  --surface: var(--ink-soft);
  --surface-2: var(--ink-rise);

  --neon-pink:   var(--accent);
  --neon-violet: var(--accent);
  --neon-cyan:   var(--info);
  --neon-lime:   var(--ok);
  --neon-yellow: var(--warn);
  --neon-orange: var(--err);

  --jk-pink:   var(--accent);
  --jk-cyan:   var(--info);
  --jk-green:  var(--ok);
  --jk-yellow: var(--warn);
  --jk-orange: var(--err);
  --jk-purple: var(--accent);
  --jk-red:    var(--err);

  --jk-dark:          var(--ink-soft);
  --jk-darker:        var(--ink-deep);
  --jk-card:          var(--ink-rise);
  --jk-card-hover:    var(--ink-rise-2);
  --jk-border:        var(--ink-line-2);
  --jk-border-strong: var(--ink-line-3);

  --jk-white:      var(--bone);
  --jk-text:       var(--bone-soft);
  --jk-text-muted: var(--bone-muted);

  --jk-font-head: var(--font-display);
  --jk-font-body: var(--font-body);
  --jk-font-mono: var(--font-mono);

  --jk-radius-sm: var(--radius-sm);
  --jk-radius-md: var(--radius-md);
  --jk-radius-lg: var(--radius-lg);
  --jk-shadow-sm: var(--shadow-sm);
  --jk-shadow-md: var(--shadow-md);
  --jk-shadow-lg: var(--shadow-lg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0.01ms;
    --dur-2: 0.01ms;
    --dur-3: 0.01ms;
    --dur-4: 0.01ms;
  }
}