/* ═══════════════════════════════════════════════════════════════════
   Design tokens — the ONLY file that may define a colour.

   CLAUDE.md §10.2 audits the stylesheets for raw colour outside :root.
   Keeping the token block in a file of its own is what makes that audit
   a one-file grep rather than a hunt: if a hex appears anywhere else,
   it is a bug.

   ONE accent hue, the amber sampled from the official logo (#F8B030).
   Everything else is a warm neutral. Two earlier passes each introduced
   a second hue — a purple hero gradient, then a petrol/teal that ended
   up carrying links, category labels and the product description — and
   both were wrong. A storefront showing six hundred different-looking
   parts needs its chrome to stay quiet.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────────────
   ONE accent: the amber sampled from the official logo (#F8B030).
   Everything else is a warm neutral — white, off-white, and the logo's
   own charcoal (#2B292B) for the few dark surfaces (announce bar,
   drawer, footer).

   There is no second hue anywhere. The teal that used to carry links,
   category labels and the hero has gone; so has the purple before it.
   A storefront selling 600 different-looking parts needs its chrome to
   stay quiet, and one accent on neutral ground is how that happens.

   Measured, not eyeballed:
     ink        on off-white  15.25:1
     ink-2      on white       7.97:1
     ink-3      on white       5.50:1
     brand-ink  on white       5.27:1   ← amber as TEXT, never --brand
     brand-ink  on panel       4.63:1
     logo-ink   on amber       7.73:1   ← button label
     amber      on charcoal    7.73:1
     dark-fg    on charcoal   12.46:1
     dark-muted on charcoal    5.85:1
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --font-sans:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  /* ── The heading / description pair ──────────────────────────────
     A short bold line followed by the sentence that explains it is the
     most repeated shape on the site: the footer support ladder, the
     trust rows, the PDP promises, the Assistant's list, review cards,
     every section head. It was being written independently on each
     surface and drifted — 17px over 16px in the footer, 16px over 16px
     on the PDP and in the Assistant, 15px over 15px on a review card.
     A one-pixel step is not a hierarchy; the description read as a
     second heading and the pair had no shape.

     One step, everywhere. The sub stays at 15px rather than dropping to
     §9.2's 14px floor, because a description is copy a customer reads,
     not metadata. Section headings keep their own larger scale — only
     their .sub is a pair member. */
  --fs-pair-head:1.0625rem;   /* 17px */
  --fs-pair-sub:.9375rem;     /* 15px */
  --lh-pair-sub:1.55;

  /* The one accent */
  --brand:#F8B030;
  --brand-dark:#C7861A;
  --brand-ink:#9C5D07;        /* amber as TEXT on light ground */
  --brand-light:#FDF0D5;
  --brand-xlight:#FFFBF2;

  /* Warm neutrals */
  --ink:#23211F;
  --ink-2:#55504B;
  --ink-3:#6E6862;
  --bg:#FFFFFF;              /* the page is white */
  --surface:#FFFFFF;
  --surface-2:#F6F4F1;       /* alternating bands, off-white */
  --line:#E4E1DB;
  --line-soft:#EFEDE8;

  /* Dark surfaces — the logo's own charcoal, not a new hue */
  --dark:#2B292B;
  --dark-deep:#1E1D1E;
  --dark-fg:#F0EEEA;
  --dark-fg-muted:#ABA49B;
  --dark-rule:rgba(255,255,255,.13);

  --green:#1E7A52;
  --red:#B3341F;

  /* Scrims. These were the last hard-coded colours in the file and the
     last place the old petrol survived: the drawer backdrop was
     rgba(6,26,32,.66), which tinted the whole page green behind an open
     drawer. They are tokens now so a scrim cannot drift off-palette. */
  --scrim:rgba(30,29,30,.66);
  --scrim-strong:rgba(20,19,19,.80);
  --scrim-full:rgba(16,15,15,.96);

  /* Lightbox chrome. The lightbox paints its own near-black ground, so
     these are neutral whites over it, not a second hue — they exist as
     tokens because §10.2's palette audit greps for raw colour outside
     :root and these were the last three literals hiding in overlays.css. */
  --lb-chrome:rgba(255,255,255,.14);
  --lb-chrome-hover:rgba(255,255,255,.26);
  --lb-ink:#FFFFFF;
  --lb-dot:rgba(255,255,255,.45);

  /* Text that sits on a saturated fill (red badge, green badge, charcoal
     button). White, but named — §10.2 greps for raw colour, and a literal
     is a literal even when it is obviously correct. */
  --on-fill:#FFFFFF;
  /* The warm tint the hero and About header fade into. */
  --warm-tint:#FDF7EC;
  /* WhatsApp's own brand green. NOT a second accent (§9.5) — it is a
     third-party logo colour, used only on the WhatsApp control, exactly
     as the Google logo colours are used only on the reviews badge. */
  --whatsapp:#25D366;

  --logo-ink:#2B292B;
  --logo-node:#FFFFFF;
  --logo-chip:#FFFFFF;

  --menu-bg:var(--dark);
  --menu-bg-deep:var(--dark-deep);
  --menu-fg:var(--dark-fg);
  --menu-fg-muted:var(--dark-fg-muted);
  --menu-rule:var(--dark-rule);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  --r-sm:4px; --r:8px; --r-lg:12px; --r-full:9999px;
  --shadow-sm:0 1px 2px rgba(35,33,31,.06);
  --shadow:0 1px 3px rgba(35,33,31,.10);
  --shadow-md:0 4px 10px -2px rgba(35,33,31,.14);
  --shadow-lg:0 12px 28px -8px rgba(35,33,31,.22);

  --z-sticky:1100; --z-fab:1200; --z-drawer:1300; --z-lightbox:1400;

  --tap:44px;
  --gutter:var(--sp-4);
  /* One announcement slide. Fixed so the slider translates onto a
     slide boundary rather than halfway through one. */
  --announce-h: 34px;
  --page:1280px;
  --tabbar-h:60px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#EDEBE7; --ink-2:#C3BDB5; --ink-3:#ABA49B;
    --bg:#191817; --surface:#232120; --surface-2:#2C2A28;
    --line:rgba(255,255,255,.13); --line-soft:rgba(255,255,255,.07);
    --brand-ink:#F8B030;
    --brand-light:rgba(248,176,48,.18);
    --brand-xlight:rgba(248,176,48,.08);
    --green:#4BC08C; --red:#EE8272;
    --menu-bg:#232120; --menu-bg-deep:#191817;
    /* --warm-tint had NO dark value. It is the far stop of the home and
       About hero gradients, so in dark mode those faded from charcoal to
       near-white; it is also the ground of the Assistant's status note,
       which measured 1.75:1. The §10.1 bug exactly: a colour defined
       only in the light :root. */
    --warm-tint:#2A2622;
    --shadow-lg:0 12px 28px -8px rgba(0,0,0,.66);
  }
}
:root[data-theme="dark"]{
  --ink:#EDEBE7; --ink-2:#C3BDB5; --ink-3:#ABA49B;
  --bg:#191817; --surface:#232120; --surface-2:#2C2A28;
  --line:rgba(255,255,255,.13); --line-soft:rgba(255,255,255,.07);
  --brand-ink:#F8B030;
  --brand-light:rgba(248,176,48,.18);
  --brand-xlight:rgba(248,176,48,.08);
  --green:#4BC08C; --red:#EE8272;
  --menu-bg:#232120; --menu-bg-deep:#191817;
  --warm-tint:#2A2622;
  --shadow-lg:0 12px 28px -8px rgba(0,0,0,.66);
}