/* ============================================================
   RIDGELINE SUPPLY — BRAND TOKENS
   Everything you need to rebrand this template lives here.
   Edit these values; every page (index / shop / product / about)
   picks the change up automatically.
   ============================================================ */
:root{
  /* ---- Core palette ---------------------------------------- */
  --void:#0E1114;         /* darkest ground — hero, footer, dark bands */
  --basalt:#171C21;       /* secondary dark surface + body ink         */
  --slate:#242C34;        /* raised dark surface                        */
  --slate-2:#33404B;      /* dark surface hairline / muted numerals     */
  --stone:#8B96A2;        /* muted text on dark                         */
  --stone-lt:#B6BEC7;     /* body text on dark                          */
  --scree:#E9E7E2;        /* light band background                      */
  --bone:#F5F4F1;         /* page background + headings on dark         */

  /* ---- Accent ---------------------------------------------- */
  --ember:#F2610C;        /* THE accent. Large fills, display, CTAs.    */
  --ember-aa:#B04304;     /* AA on bone 5.2:1 / scree 4.7:1 — small text */
  --muted:#5A646E;        /* body-muted on light (5.5:1)                 */
  --caption:#5C646D;      /* smallest captions on any light bg (≥4.6:1)  */
  --ember-soft:rgba(242,97,12,.12);

  /* ---- Hairlines ------------------------------------------- */
  --line:rgba(255,255,255,.10);   /* on dark  */
  --line-dk:rgba(16,20,24,.14);   /* on light */

  /* ---- Typefaces ------------------------------------------- */
  /* Change the <link> to Google Fonts in each page's <head> too. */
  --ff-display:'Barlow Condensed',Impact,sans-serif;  /* headings, prices */
  --ff-body:'Inter',system-ui,sans-serif;             /* body copy        */
  --ff-mono:'JetBrains Mono',ui-monospace,monospace;  /* labels, specs    */

  /* ---- Type scale (13 steps) -------------------------------- */
  --t-mono:11px; --t-xs:12px; --t-sm:14px; --t-base:16px; --t-md:17px;
  --t-lg:20px; --t-xl:24px; --t-2xl:30px; --t-3xl:38px; --t-4xl:46px;
  --t-5xl:58px; --t-6xl:74px; --t-7xl:96px;

  /* ---- Layout ---------------------------------------------- */
  --gut:60px;             /* page gutter — steps down responsively */
  --maxw:1240px;          /* content column max width              */
  --r:3px;                /* corner radius — this brand stays sharp */
}

/* Stepped gutters — keeps one grid axis at every width. */
@media(max-width:1000px){:root{--gut:28px}}
@media(max-width:560px){:root{--gut:18px}}
@media(max-width:360px){:root{--gut:14px}}