/* ============================================================
   Design Tokens — single source of truth.
   Color, spacing, radius, shadow, type. All other CSS cites these.
   ============================================================ */
:root {
  /* ---------- color ---------- */
  --bg-deep:        #0e1620;
  --bg-shell:       #16212e;
  --bg-panel:       #1d2a39;
  --bg-card:        #243446;
  --bg-card-hover:  #2e4258;
  --bg-bench:       #ebe3cb;       /* cooler tan — was #f4eede */
  --bg-bench-2:     #ddd2b0;       /* cooler tan-shadow — was #e8e0c8 */
  --bg-inset:       #1a2330;       /* dark inset panel / instrument bg */

  /* HUD-strip gradient — shared by the topbar and the jobs header. */
  --bg-hud-top:     #1c2a3a;
  --bg-hud-bottom:  #142030;
  --bg-hud-edge:    #0a1018;

  --border:         #2f4258;
  --border-strong:  #3d5572;
  --border-bench:   #c5b58b;

  --text:           #e6edf5;
  --text-dim:       #9bacc1;       /* lifted from #93a3b6 for AA */
  --text-strong:    #ffffff;
  --text-bench:     #5a513a;

  --accent:         #4fc3f7;
  --accent-2:       #29b6f6;
  --accent-hover:   #79d6fd;
  --on-accent:      #06181f;       /* dark text on accent-colored buttons */

  --money:          #ffd166;
  --good:           #4caf50;
  --good-soft:      #82d984;
  --ok:             #cdb13a;
  --bad:            #e8503a;
  --bad-soft:       #f48a78;
  --warn:           #ffaa3a;
  --warn-soft:      #ffc070;
  --premium:        #c47bff;

  /* lead-line colors used by the CPAP SVG */
  --lead-empty:     #4fc3f7;
  --lead-healthy:   #c5b58b;
  --lead-damaged:   #e8503a;
  --lead-untested:  #8d8260;

  /* themed-visuals additions */
  --price-tag:       #ffd166;   /* yellow retail price-tag */
  --price-tag-border:#c19938;
  --paper-cream:     #fafaf2;
  --paper-edge:      #c5bda5;
  --paper-text:      #2a2418;
  --paper-dim:       #5a513a;
  --oscope-green:    #4caf50;
  --oscope-bg:       var(--bg-inset);
  --mmeter-orange:   #d97b3a;
  --mmeter-orange-dk:#a85a23;
  --mmeter-lcd-bg:   #243f24;
  --mmeter-lcd-text: #9fd9a3;
  --store-floor:     #4a5664;
  --store-floor-dk:  #3a4654;
  --store-light:     #ffd166;

  /* ---------- spacing ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* ---------- radii ---------- */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* ---------- shadows ---------- */
  --sh-1: 0 1px 2px rgba(0,0,0,0.20);
  --sh-2: 0 4px 14px rgba(0,0,0,0.35);
  --sh-3: 0 8px 28px rgba(0,0,0,0.55);
  --sh-focus: 0 0 0 3px rgba(79,195,247,0.35);

  /* ---------- type ---------- */
  --fs-micro: 10px;
  --fs-xs:    11px;
  --fs-sm:    12px;
  --fs-md:    14px;
  --fs-lg:    16px;
  --fs-xl:    22px;

  --fw-regular: 400;
  --fw-semi:    600;
  --fw-bold:    700;

  --lh-tight: 1.15;
  --lh-base:  1.4;

  /* ---------- motion ---------- */
  --dur-fast: 120ms;
  --dur-mid:  220ms;
  --dur-slow: 420ms;

  /* Specialised durations for animation moments. The base trio above
     covers transitions; these cover @keyframes / WAAPI choreographies
     that need distinct timing identities (flash, burst, overlay). */
  --dur-flash:   600ms;   /* HUD value flash, gentle pulse           */
  --dur-burst:   320ms;   /* short pop / impact / bounce             */
  --dur-overlay: 800ms;   /* day-flash / curtain / banner stay-time  */

  /* Easing families. --ease stays as the legacy default for
     transitions and most keyframes; the named tokens below let
     specific moments speak the right language without forking
     cubic-bezier literals across the codebase. */
  --ease:        cubic-bezier(.2,.7,.3,1);    /* legacy default          */
  --ease-snap:   cubic-bezier(.2,.7,.3,1);    /* alias of --ease         */
  --ease-bounce: cubic-bezier(.34,1.56,.64,1); /* overshoot — incident-style */
  --ease-glide:  cubic-bezier(.42,0,.6,1);     /* particle arcs           */
  --ease-soft:   cubic-bezier(.22,.61,.36,1);  /* pill drift, fades       */
}