/* Design tokens + reset. Loaded first on every page. */



/* ============ TOKENS ============ */
:root{
  --ink:#0F1112;
  --graphite:#171A20;
  --paper:#FFFFFF;
  --mist:#F4F5F6;
  --cloud:#EAECEE;
  --silver:#5C5E62;
  --line:#E3E5E7;
  /* --red is a FILL, BORDER and FOCUS-RING token. It is 4.71:1 on white, which
     passes, but drops to 4.31:1 on --mist and 3.98:1 on --red-bg — and cart
     lines are tinted. Red TEXT uses --red-ink everywhere, so nobody has to
     re-check per surface. */
  --red:#E31937;
  --red-ink:#C4142F;      /* 6.02 on paper, 5.52 on mist, 5.10 on --red-bg */
  --red-bg:#F6E9EB;
  /* Scoped to --graphite surfaces only. 2.22:1 on white. */
  --red-on-dark:#FF8B9E;

  /* Same split for green: --go is a fill (3:1 is all a fill needs), --go-ink is
     the text colour. --go was 3.93:1 on --go-bg, which failed AA. */
  --go:#128A4B;
  --go-ink:#0E7440;       /* 5.85 on paper, 5.36 on mist, 5.21 on --go-bg */
  --go-bg:#E8F5ED;

  /* No warning colour existed. Stock limits and "pending" must not reuse red,
     which means error. */
  --warn:#8A5A00;         /* 5.93 on paper, 5.43 on mist, 5.39 on --warn-bg */
  --warn-bg:#FDF3E2;

  /* --line is 1.26:1 on white — fine for a decorative rule, a straight 1.4.11
     failure for anything that is the visible boundary of a control. This is the
     lightest grey clearing 3:1 on every surface these pages use. */
  --ctrl-line:#7E8185;    /* 3.91 paper, 3.59 mist, 3.30 cloud */

  --r-sm:14px;
  --r-md:22px;
  --r-lg:32px;
  --r-xl:44px;
  --pill:999px;

  --pad:clamp(20px,5vw,64px);
  --maxw:1320px;

  --shadow-1:0 2px 8px rgba(15,17,18,.05);
  --shadow-2:0 12px 40px rgba(15,17,18,.10);
  --shadow-3:0 24px 70px rgba(15,17,18,.16);

  --ease:cubic-bezier(.22,.61,.36,1);

  /* Height of the consent banner, written by consent.js from a ResizeObserver
     and reset to 0 when it goes. Everything fixed to the bottom of the viewport
     offsets from this. Not a design token — a measurement — but it has to live
     where every stylesheet can see it. */
  --cc-h:0px;
}

*{box-sizing:border-box;margin:0;padding:0}

/* scroll-padding, not scroll-margin, and on html rather than body — it does not
   propagate from body to the viewport, and the two are additive, so declaring
   both over-scrolls by a full banner height.

   This is only half of 2.4.11. It fixes the case where the browser scrolls a
   focused element flush to the bottom edge. It cannot fix an element already at
   maximum scroll — every footer link on every page — because there is no scroll
   range left to spend. That half is fixed by .foot reserving the strip.

   The +10px clears the 3px focus ring at its 3px offset, which buys 2.4.12 AAA
   at no cost. */
html{scroll-behavior:smooth;scroll-padding-bottom:calc(var(--cc-h) + 10px)}
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{font-family:'Outfit','Manrope',sans-serif;letter-spacing:-.02em}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
select,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
/* The nav is position:fixed and 70px tall, so a focused element scrolled to the
   very top of the viewport lands underneath it. WCAG 2.2 SC 2.4.11. */
a,button,input,select,textarea,summary,[tabindex]{scroll-margin-top:86px}

/* Available to screen readers, invisible on screen. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Skip link. The nav is fixed, so this is fixed too rather than scrolled away. */
.skip{position:fixed;top:10px;left:10px;z-index:200;padding:12px 20px;border-radius:var(--pill);
  background:var(--graphite);color:#fff;font-weight:600;font-size:14px;
  transform:translateY(-200%);transition:transform .18s var(--ease)}
.skip:focus{transform:translateY(0)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}