/* ==========================================================
   ACCEL AIR / A·TEMP — QUOTE BUILDER
   DESIGN TOKENS
   Space, radius, elevation, motion and the brand palette, plus the reset
   and base type. Everything below draws from these.

   Part 1 of 9. Loaded by index.html in numbered order and
   CASCADES IN THAT ORDER — a rule here can be overridden by any later
   part, so keep the <link> tags in sequence and add new parts at the
   position they belong, not at the end.
   ========================================================== */
@charset "UTF-8";
/* ==========================================================
   ACCEL AIR / A·TEMP — QUOTE BUILDER · STYLESHEET
   Loaded by index.html. Layout tokens live in :root; the
   responsive breakpoints are grouped at the bottom.
   ==========================================================*/

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS
   One scale for space, one for radius, one for elevation. Every component
   below draws from these, so a change here moves the whole interface
   together instead of drifting rule by rule.
   ══════════════════════════════════════════════════════════ */
:root{
  /* Brand — set per brand by setBrand(), defaults are Accel Air */
  --p:#2E9E9E;--pd:#1a7070;--pl:#4FBDBD;--pa:#F08373;--pa-d:#e2705c;
  --bg:#e8f7f7;

  /* Neutral ramp, cooled slightly so it sits under the teal without clashing */
  --ink:#131c26;--ink-2:#35465a;--soft:#5d6e80;--muted:#8695a6;
  --line:#e3e9f0;--line-2:#eef3f8;
  --card:#fff;--f:#f3f6f9;--f-2:#e9eff5;

  /* Status */
  --ok:#157a46;--okBg:#edfbf3;--red:#c0392b;--amber:#b45309;--amberBg:#fff8ed;

  /* Space — a 4px base, used for every gap and pad below */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:22px;--s6:30px;

  /* Radius */
  --r-sm:9px;--r:12px;--r-lg:16px;--r-pill:999px;

  /* Elevation. Two layers each: a tight contact shadow plus a wide ambient
     one, which is what stops a card looking like it is floating in space. */
  --e1:0 1px 2px rgba(19,28,38,.04),0 1px 3px rgba(19,28,38,.05);
  --e2:0 2px 4px rgba(19,28,38,.04),0 8px 20px rgba(19,28,38,.07);
  --e3:0 4px 8px rgba(19,28,38,.05),0 18px 44px rgba(19,28,38,.12);
  --ring:0 0 0 3px rgba(46,158,158,.18);

  /* Motion — one curve and one duration, so nothing feels out of step */
  --ease:cubic-bezier(.2,.7,.3,1);--t:.17s;

  --hdrH:68px;          /* sticky header height — the media queries keep this true */
  --wrapW:84%;
  --wrapMax:1620px;
  --gutter:0px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdrH) + 14px)}
body{
  margin:0;
  /* Best available on each OS, no webfont: Segoe UI Variable on Windows 11,
     SF on Apple, Roboto on Android. No network cost and nothing to flash in
     on a bad connection at a job site. */
  font-family:'Segoe UI Variable Text','Segoe UI',-apple-system,BlinkMacSystemFont,
              system-ui,Roboto,'Helvetica Neue',Arial,sans-serif;
  /* A whisper of warmth behind the header stops the page reading as flat grey */
  background:radial-gradient(1100px 520px at 50% -240px,#e6f3f5 0%,rgba(230,243,245,0) 72%),var(--f);
  background-attachment:fixed;
  color:var(--ink);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--p);outline-offset:2px;border-radius:4px}

/* Every figure the rep reads as money or a count is lined up on the digit, so
   columns of prices scan straight down instead of jittering. */
.pr-price,.pr-priceSub,.mp-price,.mp-priceSub,.tl-amt,.ticket-total-row strong,
.ticket-grand strong,.ticket-gst,.mb-amt,.veec-value,.ci-total,.ci-price,
.qty-val,.stepper-val,.pair-total,.di-sub{font-variant-numeric:tabular-nums}