/* ==========================================================================
   SUPPLY HOUSE — design tokens
   Cowboy's AC & Heating · redesign 2026-09-09
   Load FIRST, before every other stylesheet, on both / and /admin/.
   Nothing visible changes until a component uses these. Zero-risk step 01.
   ========================================================================== */

:root{
  /* ---------------------------------------------------------- palette */
  --espresso:#2b1d12;      /* body text AND dark surfaces */
  --deepest:#241811;       /* deepest dark — phone page bg, sidebar */
  --paper:#fdf9f0;         /* light page bg */
  --paper-alt:#f4ede1;     /* alt rows, hover, footers */
  --border:#e2d5c0;
  --hair:#f0e7d6;

  --red:#d63c2a;           /* SHORT · OVERDUE · primary button */
  --gold:#c8862e;          /* rules, tags, part numbers */
  --green:#1c6b34;         /* AT PAR · READY · DONE */
  --amber:#b3540e;         /* OVER · PENDING */
  --muted:#8a7a64;         /* secondary text — LIGHT SURFACES ONLY */

  /* on-dark tints — the only additions to the house palette.
     Same hues, lifted for contrast on --deepest. Ratios measured. */
  --ink-on-dark:#f2ead9;   /* 13.9:1 */
  --muted-on-dark:#b9a88e; /*  7.6:1 — replaces --muted, which fails on dark */
  --line-on-dark:#3a2716;
  --surface-on-dark:#2b1d12;
  --red-on-dark:#f06a55;   /*  5.6:1 */
  --gold-on-dark:#d98f3d;  /*  6.5:1 */
  --green-on-dark:#6fbf88; /*  8.4:1 */
  --amber-on-dark:#e8a63a; /*  8.1:1 */

  /* ------------------------------------------------------------- type */
  --font-ui:'Barlow',-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-num:'Barlow Condensed','Barlow',sans-serif;   /* numbers only */
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --num-xl:40px;   /* hero dollar figure */
  --num-lg:26px;   /* secondary count */
  --title:22px;    /* screen title — 700, uppercase */
  --row:16px;      /* row name — 600, sentence case */
  --body:14px;     /* prose, hints */
  --label:11px;    /* section head, table head — mono, .14em, caps */
  --meta:10px;     /* part number, timestamp — mono, .08em */

  /* mono caps is for LABELS, PART NUMBERS, STATUS WORDS and SECTION HEADS.
     Tool names, part names and people are --font-ui sentence case. */

  /* ------------------------------------------------------------ space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px;
  --gutter:16px;        /* phone edge — nothing tappable inside it */
  --tap:48px;           /* min hit target; 56 for a primary button */
  --row-phone:56px;     /* tool row */
  --row-count:64px;     /* part row with a stepper */
  --row-admin:48px;     /* table row */

  /* ------------------------------------------------- radius / borders */
  --r0:0; --r1:4px; --r2:8px;
  --bw:1px;             /* borders are 1px. no 3px accent bars. */
  --elev:none;          /* flat. sheets get a 1px top rule, not a shadow. */

  /* ----------------------------------------------------------- motion */
  --t-fast:120ms;       /* tap feedback, pill swap */
  --t-base:200ms;       /* screen enter, sheet, toast */
  --t-slow:420ms;       /* meter fill, number settle */
  --ease:cubic-bezier(.2,.8,.3,1);
}

/* Only transform and opacity animate. Never width, height, top,
   filter or box-shadow — old Androids drop frames on those. */
@keyframes shSpin3d{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes shRise  {from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes shIn    {from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes shOut   {from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes shBar   {from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes shPulse {0%,100%{opacity:1}50%{opacity:.45}}
@keyframes shScan  {0%,100%{transform:translateY(-72px)}50%{transform:translateY(72px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}