:root {
  --bg:       #0a0a0a;
  --bg-2:    #141414;
  --bg-3:    #1e1e1e;
  /* Subtle elevated surface for cards and notices (settings panes, help cards,
     rack-over notice). Sits between --bg and --bg-2 so cards lift visibly
     without overpowering the dark theme. */
  --bg-elev:  rgba(255, 255, 255, 0.03);
  --fg:       #f2ede4;
  --fg-dim:   #a0998f;
  --fg-mute:  #585250;
  --accent:   #c49840;
  --gold:     #c49840;
  --gold-faint: rgba(196, 152, 64, 0.12);
  --line:     #262420;

  --warn:     #c49840;
  --bad:      #b85a4a;

  /* Category colors live in JS, not here: CATEGORY_COLORS in src/data/sheet.js
     (mirrored in scripts/build-data.py). Applied at runtime as inline
     style="--cat:<hex>" / --rail-cat / --swatch. */

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;

  /* Motion grammar. Two durations only:
       --t-fast (snappy, taps/hovers) and --t-slow (slides/overlays).
     Standard ease-out for entrances, gentle decel for state changes. */
  --t-fast: 150ms;
  --t-slow: 240ms;
  --ease:   cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ── Type scale ──────────────────────────────────────────────────────────
     Shared font-size rungs so near-duplicate hardcoded sizes (11/11.5, 13/13.5,
     etc.) can snap to one canonical value. Snap WITHIN a role only — a hero
     title and a caption stay on different rungs. The iOS focus-zoom guard means
     form controls (input/select/textarea) MUST stay >= 16px (--text-xl); never
     drop a control below that rung. clamp() hero/customer/F1 sizes, the 22px
     meta-dd, 32px detail title, and 56px watermark are intentionally OFF-scale
     and are preserved as-is (not snapped). */
  --text-3xs:  9px;   /* tiniest readable caption: story-v2 header name */
  --text-2xs:  10px;  /* micro caps/badges: cat-count, queue/review flags, source chips */
  --text-xs:   11px;  /* standard caption: app-title/meta, meta dt, scroll-hint, settings titles */
  --text-sm:   12px;  /* secondary caption: cat-pill, form-hint, queue-meta, changelog date */
  --text-md:   13px;  /* small body: stockLabel, settings-row-sub, add-form labels, help body */
  --text-base: 14px;  /* base UI text: search-input, toast, toggle-btn, section-body, story title */
  --text-lg:   15px;  /* emphasis body (distinct from 16): no-results, picker-row, photo-upload-btn */
  --text-xl:   16px;  /* form/control + menu-row floor (iOS focus-zoom guard — keep >= here) */
  --text-2xl:  18px;  /* heading tier: card-body, settings-header, edit-access h3, help-stat strong */
  --text-3xl:  28px;  /* section hero rung: cat-name, card-hero title, settings-back glyph */

  /* ── Spacing scale ───────────────────────────────────────────────────────
     Shared gap/padding rungs. Snap non-load-bearing pads (5/7→6, 9/11→10) to
     the nearest rung; leave GEOMETRY-critical offsets (safe-area math, absolute
     insets, the F1 grid clamps) as their own literal values — do not force
     those onto this scale. */
  --space-0:   2px;   /* hairline gaps: summary gap, queue row gaps, ledger inner pad */
  --space-1:   4px;   /* tightest real gap/pad: name margin-top, meta dd margin, status-pill V-pad */
  --space-1-5: 6px;   /* small gap/pad: sample-row small gap, form label gap (snap 5/7→6) */
  --space-2:   8px;   /* standard small gap: cat-row, toggle-row, review-actions, picker gap */
  --space-2-5: 10px;  /* medium-small pad/gap: header-top margin, search-shell gap (snap 9/11→10) */
  --space-3:   12px;  /* common pad: card-title margin, queue-item pad, save-bar gap, form rows */
  --space-3-5: 14px;  /* card inner pad: sample-row gap, help-card pad, review-form gap */
  --space-4:   16px;  /* section pad: sample-row pad-H, settings-main pad, picker-header pad */
  --space-4-5: 18px;  /* generous pad: add-form hint margin, story funfact pad, picker-row pad-H */
  --space-5:   20px;  /* large gap/pad: meta-grid gap, story header pad, settings-section gap */
  --space-6:   24px;  /* block separation: help-section gap, edit-danger margin, no-results pad-H */
  --space-7:   32px;  /* major section gap: customer-info pad, loading-state pad-V, desktop header pad-H */
  --space-8:   40px;  /* x-large: loading-state pad, edit-danger margin-top, customer-hero spacing */
  --space-9:   64px;  /* hero whitespace: no-results pad-V, search-results bottom pad */

  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* Respect prefers-reduced-motion globally — kill long entrance animations
   and bouncing scroll-hints. Hover/focus transitions stay (short and OK
   per the spec). */
@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;
  }
}