/* ═══════════════════════════════════════════════════════════════════════
   AgriPlaner GPS — Design Tokens
   Eine Quelle für Farben, Abstände, Radien, Typografie, Elevation.
   Komponenten dürfen NUR diese Tokens verwenden — keine Rohwerte.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Farbsystem (Dark "Field Ops") ────────────────────────────────── */
  --bg0: #0a0f1a;            /* Seite */
  --bg1: #111827;            /* Fläche 1: Karten, Panels */
  --bg2: #1a2436;            /* Fläche 2: Hover, Inputs, verschachtelt */
  --bg3: #243147;            /* Fläche 3: aktive Zustände */

  --border:        rgba(148, 163, 184, .14);
  --border-strong: rgba(148, 163, 184, .28);

  --text:       #e8eef7;
  --text-dim:   #b6c2d4;     /* Sekundärtext — WCAG AA auf bg1 */
  --text-muted: #7e93ac;     /* Tertiär: Labels, Meta */

  /* Brand */
  --accent:        #4ade80;
  --accent-strong: #22c55e;
  --accent-ink:    #06170c;  /* Text AUF Akzentflächen */
  --accent-dim:    rgba(74, 222, 128, .14);

  /* Status — strikt getrennt vom Brand */
  --ok:       #34d399;
  --ok-dim:   rgba(52, 211, 153, .15);
  --warn:     #fbbf24;
  --warn-dim: rgba(251, 191, 36, .15);
  --err:      #f87171;
  --err-dim:  rgba(248, 113, 113, .15);
  --idle:     #64748b;
  --idle-dim: rgba(100, 116, 139, .2);

  /* ── Spacing (4px-Raster) ─────────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;

  /* ── Radius ───────────────────────────────────────────────────────── */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-full: 999px;

  /* ── Elevation ────────────────────────────────────────────────────── */
  --e1: 0 1px 3px rgba(0, 0, 0, .3);
  --e2: 0 4px 16px rgba(0, 0, 0, .35);
  --e3: 0 12px 40px rgba(0, 0, 0, .5);

  /* ── Typografie ───────────────────────────────────────────────────── */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --fs-xs:  11px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 28px;

  /* ── Motion ───────────────────────────────────────────────────────── */
  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t-med:  200ms cubic-bezier(.4, 0, .2, 1);

  /* ── Layers ───────────────────────────────────────────────────────── */
  --z-panel:  40;
  --z-sheet:  60;
  --z-nav:    80;
  --z-modal:  100;
  --z-toast:  120;

  /* Glass-Effekt für schwebende Panels über der Karte */
  --glass-bg: rgba(17, 24, 39, .88);
  --glass-blur: blur(14px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}