/* ============================================================================
   Tappr Design Tokens
   Single Source of Truth: /DESIGN_PRINCIPLES.md
   Version: 1.0 · April 2026

   Alle Custom Properties dieses Files sind verbindlich. Komponenten referenzieren
   ausschliesslich diese Tokens — keine hardcoded Hex-Werte, keine hardcoded
   Pixel-Spacings ausserhalb von Icon-Grössen und Mikro-Werten.
   ========================================================================= */

:root {
  /* ─── Backgrounds (warm neutral) ──────────────────────────────────────── */
  --bg:            #f7f6f2;
  --bg-2:          #ffffff;
  --bg-3:          #efede7;
  --bg-warm:       #efeae0;

  /* Sidebar (Backoffice + Super-Admin) — dunkle, kühle Fläche */
  --sidebar-bg:        #17171f;
  --sidebar-text:      #e8e8e4;
  --sidebar-text-mute: #7a7a78;
  --sidebar-rule:      rgba(255, 255, 255, 0.06);
  --sidebar-hover:     rgba(255, 255, 255, 0.05);

  /* ─── Text (Ink + Mute) ──────────────────────────────────────────────── */
  --ink:    #17171f;
  --ink-2:  #2c2c36;
  --mute:   #6a6a70;
  --mute-2: #9d9da2;

  /* ─── Rules + Dividers ───────────────────────────────────────────────── */
  --rule:   #e4e2dc;
  --rule-2: #d6d4cc;

  /* ─── Brand (Coral) ──────────────────────────────────────────────────── */
  --coral:       #ff4d4d;
  --coral-2:     #e63a3a;
  --coral-soft:  #ffe5e5;

  /* ─── Status ─────────────────────────────────────────────────────────── */
  --green:       #16a34a;
  --green-soft:  #dcfce7;
  --amber:       #f59e0b;
  --amber-soft:  #fef3c7;
  --red:         #dc2626;
  --red-soft:    #fee2e2;
  --blue:        #0070e0;
  --blue-soft:   #e6f1fb;

  /* ─── Overlay / Shadow ───────────────────────────────────────────────── */
  --overlay:        rgba(23, 23, 31, 0.55);
  --shadow-modal:   0 24px 60px -20px rgba(23, 23, 31, 0.35);
  --shadow-card:    0 1px 2px rgba(23, 23, 31, 0.04);
  --shadow-lift:    0 6px 18px -8px rgba(23, 23, 31, 0.18);

  /* ─── Focus-Ring ─────────────────────────────────────────────────────── */
  --focus-ring:        0 0 0 2px var(--coral);
  --focus-ring-offset: 2px;

  /* ─── Spacing (8pt-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;
  --space-24: 96px;
  --space-28: 112px;

  /* ─── Radius ─────────────────────────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  18px;
  --radius-full: 100px;

  /* ─── Typografie — Familien ──────────────────────────────────────────── */
  --font-sans: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  /* Fraunces wird erst in Phase 5 (Landing) eingebunden. Nicht im Backoffice. */
  --font-serif: 'Fraunces', Georgia, serif;

  /* ─── Typografie — Rollen Backoffice (§3) ────────────────────────────── */
  /* Page Title */
  --fs-page:   28px;
  --lh-page:   1.2;
  --ls-page:   -0.02em;
  /* Section Title */
  --fs-section: 20px;
  --lh-section: 1.3;
  --ls-section: -0.015em;
  /* Stat Value */
  --fs-stat:    32px;
  --lh-stat:    1;
  --ls-stat:    -0.025em;
  /* Stat Label / Eyebrow / Table Header */
  --fs-eyebrow: 11px;
  --lh-eyebrow: 1.4;
  --ls-eyebrow: 0.08em;
  /* Body */
  --fs-body:    14px;
  --lh-body:    1.55;
  --fs-body-sm: 13px;
  --lh-body-sm: 1.5;
  /* Table Cell */
  --fs-table:   13px;
  --lh-table:   1.4;
  /* Mono */
  --fs-mono:    13px;
  --lh-mono:    1.4;

  /* ─── Layout ─────────────────────────────────────────────────────────── */
  --sidebar-w:    240px;
  --topbar-h:     60px;
  --content-max:  1280px;
  --content-pad:  32px;

  /* ─── Motion ─────────────────────────────────────────────────────────── */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:   160ms;
  --dur-state:   240ms;
  --dur-modal:   280ms;
  --dur-reveal:  700ms;

  /* ─── Breakpoints (nur als Referenz — media queries nutzen Werte) ────── */
  --bp-tablet: 1024px;
  --bp-mobile: 640px;

  /* ─── Z-Index-Leiter ─────────────────────────────────────────────────── */
  --z-topbar:   10;
  --z-sidebar:  20;
  --z-modal:    50;
  --z-toast:    60;
  --z-max:      100;
}

/* prefers-reduced-motion respektieren (§8, §14) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}