/* The parts pages' tokens (parts.css, hub.css): every colour, font and radius
   they draw with, each defaulting to Northern Performance's look. The block is
   :where(:root), no specificity at all, so a site's theme sets any of them in
   its own :root and wins whatever the order the stylesheets load in. */
:where(:root) {
  /* the palette (NP's --np-* tokens) */
  --parts-ink: #222;
  --parts-ink-soft: #555;
  --parts-ink-strong: #2E2E2E;          /* the hub's heading and tiles, a card's brand name */
  --parts-accent: #C8102E;              /* headings, picks, chevrons, the current tile */
  --parts-accent-strong: #A50D26;       /* the hub's prompt link on hover */
  --parts-accent-wash: color-mix(in srgb, var(--parts-accent) 4.5%, transparent);        /* a rail row on hover */
  --parts-accent-wash-strong: color-mix(in srgb, var(--parts-accent) 8%, transparent);   /* a rail row pressed */
  --parts-focus: #14387F;               /* the keyboard focus ring, the search outcome's link */
  --parts-border: #E2E2E2;
  --parts-surface: #F5F5F5;             /* Apply, Go, the current strip tile, a dead pager button */
  --parts-bg: #fff;                     /* tiles, cards, fields, the rail's heading */
  --parts-photo-bg: #fff;               /* behind a product or category photo */
  --parts-chip-bg: #EEF1F5;             /* an applied filter's chip */

  /* the rail */
  --parts-rail-bg: #F6F6F7;
  --parts-rail-rule: #E5E5E6;
  --parts-rail-rule-soft: #ECECED;
  --parts-rail-shadow: 0 2px 10px #00000012;

  /* the black bar over the list */
  --parts-bar-bg: #111;
  --parts-bar-ink: #fff;

  /* the cards */
  --parts-card-shadow: 0 2px 8px #22222226;
  --parts-card-border-alt: #9A9A9E;     /* every second card's rule */
  --parts-fit: #26914A;                 /* the fits line and its tick */
  --parts-fit-ink: #fff;                /* the tick on it */
  --parts-stock: #26914A;               /* In stock, External warehouse stock */
  --parts-stock-wait: #b45309;          /* Manufacturer stock */
  --parts-cta: #26914A;                 /* Add to Cart */
  --parts-cta-hover: #1F7A3D;
  --parts-cta-ink: #fff;
  --parts-qty-border: #ccc;
  --parts-qty-step: #f4f4f4;
  --parts-qty-step-hover: #e6e6e6;

  /* the hub's Include universal products switch */
  --parts-toggle-off: #b9b9b9;
  --parts-toggle-off-hover: #9a9a9a;
  --parts-toggle-knob-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

  /* a heading's icon drawn in the accent: a CSS filter, since the icons are images (NP's red) */
  --parts-icon-filter: brightness(0) saturate(100%) invert(13%) sepia(94%) saturate(5896%) hue-rotate(347deg) brightness(80%) contrast(95%);

  /* the font every parts page rule names */
  --parts-font: Archivo, sans-serif;

  /* the radii */
  --parts-radius: 1.5px;                /* the bar, its fields, Add to Cart, the pager */
  --parts-radius-card: 2px;
  --parts-radius-check: 2px;            /* a facet's box */
  --parts-radius-chip: 3px;
  --parts-radius-image: 4px;            /* the mast's category image */
  --parts-radius-photo: 1px;            /* a card's photo */
  --parts-radius-tip: 4px;              /* the availability hint's bubble */
  --parts-radius-rail: 6px;
  --parts-radius-round: 50%;            /* the tick, the hint, the switch's knob */
  --parts-radius-toggle: 10px;          /* the switch's track */
  --parts-radius-tile-image: 0;         /* a hub tile's image */
}