/* ============================================================
   WEBFONT — Archivo Variable, self-hosted
   ------------------------------------------------------------
   Served from /fonts. No CDN, no third-party request, nothing
   that can break if Google Fonts is blocked on a school or
   office network. Archivo is licensed under the SIL Open Font
   License 1.1 — see fonts/ARCHIVO-LICENSE.txt.
   One variable file covers every weight the site uses (400-800).
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/archivo-latin-variable.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../fonts/archivo-latin-ext-variable.woff2') format('woff2-variations'),
       url('../fonts/archivo-latin-ext-variable.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   TUFF EMOTO — DESIGN TOKENS
   ------------------------------------------------------------
   Every color, type size, space and radius used anywhere in
   this site is declared here. Components must never hardcode a
   hex value — reference a token or add one.

   PALETTE: "Asphalt & Hazard"
   Base is a cool near-black graded like tarmac, not the pure
   #000 of a gaming UI, so photography and gray placeholder
   blocks sit on it without banding. The single accent is a
   hazard orange lifted from off-road safety gear and enduro
   number plates — it is native to the sport rather than
   borrowed from esports, and it is reserved exclusively for
   buy actions so the brightest pixel on any screen is always
   the one that takes money. Neutrals run nine steps so cards,
   borders and disabled states separate without a second hue.
   All text pairs are verified at WCAG AA or better.
   ============================================================ */

:root {
  color-scheme: dark;

  /* ---------- Neutrals: asphalt ---------- */
  --c-void:          #08090A;   /* page behind everything, footer */
  --c-base:          #0E1012;   /* default page background */
  --c-surface:       #16191C;   /* cards, header, drawer */
  --c-surface-2:     #1E2226;   /* raised: inputs, chips, image wells */
  --c-surface-3:     #22262A;   /* disabled fills, pressed neutrals */
  --c-line:          #2A2F34;   /* hairline borders */
  --c-line-strong:   #3A4147;   /* focused / hovered borders */

  /* ---------- Text ---------- */
  --c-text:          #EDEFF1;   /* primary       16.5:1 on base */
  --c-text-2:        #A8B2BA;   /* secondary      8.8:1 on base */
  --c-text-muted:    #87909A;   /* meta, legal    5.9:1 on base */
  --c-text-disabled: #8A939B;   /* on --c-surface-3, 4.9:1 */
  --c-text-invert:   #0E1012;   /* on light fills */

  /* ---------- Accent: BUY ACTIONS ONLY ----------
     Do not use these for links, badges, icons, borders,
     headings, hover states on non-CTAs, or decoration. */
  --c-accent:        #FF5A1F;
  --c-accent-hover:  #FF7038;
  --c-accent-press:  #E64A10;
  --c-accent-ink:    #140A05;   /* text/icons sitting on accent */
  --c-accent-text:   #FF7038;   /* accent AS TEXT: price emphasis only */
  --c-accent-soft:   rgba(255, 90, 31, 0.14);
  --c-accent-glow:   rgba(255, 90, 31, 0.32);

  /* ---------- Scrims over imagery ---------- */
  --c-scrim-strong: rgba(8, 9, 10, 0.94);
  --c-scrim-mid:    rgba(8, 9, 10, 0.60);
  --c-scrim-soft:   rgba(8, 9, 10, 0.18);

  /* ---------- Support (never a CTA) ---------- */
  --c-flag:          #E8E2D6;   /* bone badge fill: NEW, LOW STOCK */
  --c-flag-ink:      #141618;
  --c-star:          #DDE1E4;   /* review stars */
  --c-star-empty:    #3A4147;
  --c-ok:            #5FBE86;   /* in stock */
  --c-focus:         #FFFFFF;   /* focus ring */

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --shadow-3: 0 -8px 32px rgba(0,0,0,.55);
  --shadow-cta: 0 6px 20px var(--c-accent-glow);

  /* ---------- Type ---------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* mobile-first scale (fluid, clamps to desktop) */
  --fs-3xs: 0.6875rem;  /* 11px  labels, legal */
  --fs-2xs: 0.75rem;    /* 12px  eyebrow, meta */
  --fs-xs:  0.8125rem;  /* 13px  captions */
  --fs-sm:  0.875rem;   /* 14px  UI text */
  --fs-md:  1rem;       /* 16px  body */
  --fs-lg:  1.125rem;   /* 18px  lead */
  --fs-xl:  clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.25rem + 1.4vw, 2rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2.6vw, 3rem);
  --fs-4xl: clamp(2.5rem, 1.9rem + 3.2vw, 4rem);

  --lh-tight: 1.02;
  --lh-snug:  1.2;
  --lh-body:  1.6;

  --tr-tight:  -0.03em;
  --tr-normal: -0.01em;
  --tr-wide:   0.08em;
  --tr-wider:  0.16em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---------- Space (4px base) ---------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

  /* ---------- Radii / borders ---------- */
  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  14px;
  --r-pill: 999px;
  --border: 1px solid var(--c-line);

  /* ---------- Brand mark ----------
     The TE mark is 1.665:1, so height drives everything. Clear space
     equal to the height of the E bar is roughly 0.18 x the mark height. */
  --logo-h:    28px;
  --logo-h-lg: 44px;
  --logo-h-xl: clamp(72px, 14vw, 148px);
  --logo-clear: 0.18em;

  /* Wordmark is 12.47:1 — extremely wide, so it is sized off its own
     scale, not the mark's. Roughly 0.44 x the mark height reads as a
     balanced horizontal lockup. */
  --word-h:    12px;
  --word-h-md: 15px;
  --word-h-lg: 20px;

  /* ---------- Layout ---------- */
  --wrap:      1240px;
  --wrap-text: 68ch;
  --gutter:    var(--sp-4);
  --header-h:  56px;
  --stickybar-h: 68px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2,.7,.3,1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 320ms;

  --z-header: 60;
  --z-sticky: 70;
  --z-drawer: 90;
  --z-toast:  100;
}

@media (min-width: 900px) {
  :root {
    --gutter: var(--sp-8);
    --header-h: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}