/* The parts pages' tokens (parts.css, hub.css, product.css, band.css): every colour, font,
   radius and the page width they draw with, each defaulting to the counter's look, the
   store.orbitalparts.ca listing (its site.css :root, ADR 0007). The block is :where(:root),
   no specificity at all and in no layer, so a site's theme sets any of them in its own
   :root and wins whatever the order the stylesheets load in.

   The counter: warm black ink for text and filled buttons, cream and sand for hovers and
   picks, dove for every rule, green only for the fitment verdict and the one main action
   of a page, red only for "Does not fit". A site sets its brand colour as --parts-accent
   and nothing else: the verdict and the stock dot have their own green (--parts-fit), so a
   red brand never paints a part that fits as one that does not.

   Fonts: Inter 14/20 for everything, Geist Mono for part numbers and money. The kit ships
   neither: the stacks name them first with system fallbacks, and a site's base.html loads
   them (or sets these two tokens to its own).

   The cascade (docs/adr/0006): every kit stylesheet but this one sits in @layer kit, and
   each opens with the order `@layer base, kit, site;`, which a site's first stylesheet
   repeats. A site's reset and element defaults go in @layer base, under the kit's rules,
   so `button { background: none }` never undoes a kit button; its own rules go in
   @layer site, over them, so it never fights the kit's specificity; its --parts-* values
   go on :root outside any layer (one inside a layer would lose to this unlayered block).
   A site styles the parts pages and the vehicle band through these tokens only: a site
   rule naming a kit class is a doctor failure. */
:where(:root) {
  /* the counter's palette (the store's site.css :root, one token each) */
  --parts-ink: #1a1613;                 /* text, filled buttons, the picked pager number */
  --parts-ink-2: #332e29;               /* a filled button on hover */
  --parts-cream: #f9f8f6;               /* a row on hover, the ledger's head, a soft rule */
  --parts-sand: #f2ede5;                /* a picked facet row, a chip, a pressed toggle */
  --parts-sand-2: #e8e1d6;              /* a chip on hover */
  --parts-dove: #d5d9e2;                /* every rule: panels, the ledger, fields, the rail's groups */
  --parts-steel: #545454;               /* secondary text: a brand under a part number, a facet row */
  --parts-fog: #858585;                 /* quiet text: counts, Sugg. Retail, an out-of-stock dot */
  --parts-red: #b42318;                 /* Does not fit, a failed add */
  --parts-red-bg: #fbeceb;
  --parts-accent: #1e9e5a;              /* the one main action (the lightbox's and the product page's Add, Search), the focus ring; a site's brand colour */
  --parts-accent-bg: #e7f1e9;           /* a row just added to the cart, your vehicle's fitment row */
  --parts-fit: #1e9e5a;                 /* the fits verdict's tick and the in-stock dot: green whatever the accent */
  --parts-fit-strong: #1a6e41;          /* the fits verdict's words (the counter's --accent-deep) */
  --parts-bg: #fff;                     /* panels, rows, fields, cards */

  /* the counter's type and measure */
  --parts-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --parts-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;  /* part numbers and money */
  --parts-max: 1240px;                  /* the page's width, gutters inside it */
  --parts-gut: 16px;                    /* the page's side gutter */
  --parts-radius: 4px;                  /* buttons, fields, the pager, the view switch */

  /* NP's names, kept because a site may set them, each mapped onto the counter's palette
     so a site that set only some of them (most often --parts-accent) still looks whole */
  --parts-ink-soft: var(--parts-steel);           /* NP's #555 secondary text: the counter's steel */
  --parts-ink-strong: var(--parts-ink);           /* NP's #2E2E2E headings and tiles: the counter has one ink */
  --parts-accent-strong: color-mix(in srgb, var(--parts-accent) 66%, var(--parts-ink));  /* NP's darker red on hover: the accent deepened, #1d7042 by default (the counter's --accent-deep is #1a6e41), so a site's brand deepens with it */
  --parts-accent-wash: var(--parts-cream);        /* NP's 4.5% accent on a hovered rail row: the counter hovers a row in cream */
  --parts-accent-wash-strong: var(--parts-sand);  /* NP's 8% accent on a pressed row: the counter picks a row in sand */
  --parts-focus: var(--parts-accent);             /* NP's navy ring: the counter's ring is its accent, so a site's brand rings too */
  --parts-border: var(--parts-dove);              /* NP's #E2E2E2 rules: dove is every rule */
  --parts-surface: var(--parts-cream);            /* NP's #F5F5F5 quiet fill (Apply, a current tile, a dead pager step): cream */
  --parts-photo-bg: var(--parts-bg);              /* behind a product or category photo */
  --parts-chip-bg: var(--parts-sand);             /* NP's blue-grey chip: the counter's chips are sand */

  /* the rail: NP's grey panel; the counter's rail is unboxed on the page, ruled in dove */
  --parts-rail-bg: transparent;
  --parts-rail-rule: var(--parts-dove);
  --parts-rail-rule-soft: var(--parts-cream);
  --parts-rail-shadow: none;

  /* NP's black bar over the list: the counter's list has a plain toolbar, so these colour
     the vehicle band only, the counter's band ink, a shade warmer than --parts-ink */
  --parts-bar-bg: #2b2520;
  --parts-bar-ink: #fff;

  /* the cards: the counter's are flat, ruled in dove, a hovered card ringed in ink */
  --parts-card-shadow: none;
  --parts-card-border-alt: var(--parts-dove);     /* NP ruled every second card darker: the counter rules them all alike */
  --parts-fit-ink: #fff;                          /* the tick on the fits disc */
  --parts-stock: var(--parts-fit);                /* the in-stock dot */
  --parts-stock-wait: var(--parts-fog);           /* NP's amber manufacturer stock: the counter greys every dot that is not in stock */
  --parts-cta: var(--parts-accent);               /* the one main action's fill (a row's Add is ink, as the counter draws it) */
  --parts-cta-hover: var(--parts-accent-strong);
  --parts-cta-ink: #fff;
  --parts-cart-error: var(--parts-red);           /* the line under Add when the add failed (kit-cart.js) */
  --parts-qty-border: var(--parts-dove);
  --parts-qty-step: var(--parts-cream);           /* a quantity stepper's button */
  --parts-qty-step-hover: var(--parts-sand);

  /* the vehicle band under a site's header (band.css): the bar's colours, Search in the
     accent; its fields are --parts-bg, --parts-ink and --parts-border */
  --parts-band-bg: var(--parts-bar-bg);
  --parts-band-ink: var(--parts-bar-ink);  /* the heading, the Clear link, the focus ring */
  --parts-band-go: var(--parts-accent);    /* Search */
  --parts-band-go-hover: var(--parts-accent-strong);
  --parts-band-go-ink: #fff;

  /* the hub's Include universal products switch */
  --parts-toggle-off: var(--parts-fog);
  --parts-toggle-off-hover: var(--parts-steel);
  --parts-toggle-knob-shadow: 0 1px 2px color-mix(in srgb, var(--parts-ink) 25%, transparent);

  /* a heading's icon: a CSS filter, since the icons are images; the counter draws them in
     ink (black, a hair darker), where NP turned them red */
  --parts-icon-filter: brightness(0) saturate(100%);

  /* the radii: --parts-radius above for the controls */
  --parts-radius-card: 6px;             /* panels: the ledger, a grid card, the empty state, the peek and the mast */
  --parts-radius-check: 3px;            /* the In stock only box, a facet row */
  --parts-radius-chip: 13px;            /* a chip, a pill 26px tall */
  --parts-radius-image: var(--parts-radius);  /* the mast's category image */
  --parts-radius-photo: 3px;            /* a row's thumbnail */
  --parts-radius-tip: var(--parts-radius);    /* a hint's bubble */
  --parts-radius-rail: 6px;             /* the folded rail's panel */
  --parts-radius-round: 50%;            /* the tick, a dot, the lightbox's round buttons, the switch's knob */
  --parts-radius-toggle: 10px;          /* the switch's track */
  --parts-radius-tile-image: 0;         /* a hub tile's image */
}