/*
 * ════════════════════════════════════════════════════════════════
 *  Show My Bike — Design Tokens
 *  Theme: Graphite Workshop
 *
 *  ⚠️  SINGLE SOURCE OF TRUTH
 *  Alle Seiten laden diese Datei. Niemals Tokens direkt in eine
 *  Seite schreiben oder hier nicht definierte Werte verwenden.
 * ════════════════════════════════════════════════════════════════
 */

:root {

  /* ── Backgrounds ─────────────────────────────────────────────── */
  --bg:  #F6F5F2;        /* Haupt-Hintergrund                       */
  --bg2: #FFFFFF;        /* Panels, Karten                          */
  --bg3: #EEECE7;        /* Hover-States                            */
  --bg4: #E6E2DB;        /* Inputs, tiefere Ebenen                  */
  --carbon: #151515;     /* Dunkle Akzentflächen                    */

  /* ── Primary / Accent ────────────────────────────────────────── */
  --accent:       #FF5A00;
  --accent-light: #FF6A1A;
  --accent-dark:  #D94800;
  --accent-tint:  rgba(255,90,0,0.10);
  --accent-glow:  rgba(255,90,0,0.22);

  /* ── Sekundär-Farben ─────────────────────────────────────────── */
  --lavender:     #D9D4CB;
  --lavender-bg:  rgba(255,90,0,0.08);
  --cream:        #F0EDE8;

  /* ── Kategorie-Farben ────────────────────────────────────────── */
  --amber: #B1782D;      /* Compare-Modus Build B                   */
  --rose:  #B94036;      /* Race-Kategorie                          */
  --aero:  #5B6F7F;      /* Aero-Kategorie                          */
  --end:   #52765D;      /* Endurance-Kategorie                     */

  /* ── Text ────────────────────────────────────────────────────── */
  --text:     #2B2B2B;
  --text-mid: #6F6A63;
  --text-low: #969087;

  /* ── Borders ─────────────────────────────────────────────────── */
  --border:    #DEDAD2;
  --border-hi: #CFC9BF;
  --border-lo: #EAE7E1;

  /* ── Radii ───────────────────────────────────────────────────── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   18px;
  --r-pill: 999px;

  /* ── Spacing (4px Grid) ──────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  72px;

  /* ── Schatten ────────────────────────────────────────────────── */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.80) inset, 0 14px 34px rgba(43,43,43,0.08);
  --shadow-lift: 0 18px 42px rgba(43,43,43,0.14);

  /* ── Typografie ──────────────────────────────────────────────── */
  --ff-display: 'Montserrat', system-ui, sans-serif;
  --ff-body:    'Inter', system-ui, sans-serif;
}