/* ═══════════════════════════════════════════════════════════════════════════
   VANTA — MONOCHROME IDENTITY
   Black · graphite · silver · white, sampled off the client's own logo
   (a brushed-silver V/P monogram on a pure-black ground). No hue anywhere:
   every value below is neutral with a ~2-point cool bias in the blue channel,
   which is what makes grey read as SILVER rather than as mud.

   HOW THIS FILE WORKS — and why it is almost entirely custom properties.
   The master template resolves every surface, ink, border and shadow through
   --sf-* tokens. So a palette change is a TOKEN change, not a rule rewrite:
   nothing here fights a component's specificity, and nothing here has to be
   re-fought when the master template moves.

   Two registers, and the site alternates between them:
     · the LIGHT register lives on html:root — white ground, near-black ink,
       graphite accent, silver hairlines.
     · the DARK register is the same token set re-declared on the sections
       listed below. Because `body .sf-section { background: var(--sf-bg) }`
       resolves --sf-bg AT the section element, re-declaring the token on that
       element flips the whole section — ground, ink, cards, borders, buttons,
       gradients — with no per-component rule anywhere.

   SPECIFICITY NOTE: tokens are declared on `html:root` (0,1,1), not `:root`
   (0,1,0), so they beat theme.css and every page's inline <style> block no
   matter where this file is linked in the document.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE LIGHT REGISTER ─────────────────────────────────────────────────── */
html:root {
  --sf-bg:        #FFFFFF;   /* page ground */
  --sf-band:      #F1F3F4;   /* alternating section band, one step off white */
  --sf-surface:   #F6F8F9;   /* cards, media plates */
  --sf-elevated:  #FFFFFF;   /* panels that sit above a band */
  --sf-text:      #0D0F11;   /* 18.9:1 on white */
  --sf-muted:     #5A6066;   /*  6.4:1 on white */

  /* The accent on a light ground has to carry TEXT, so it is graphite, not
     silver: silver on white is ~2.2:1 and fails every ink role it touches.
     Silver is the accent on the dark register, where it belongs. */
  --sf-accent:      #2A2F34;   /* 13.5:1 on white */
  --sf-accent-text: #FFFFFF;
  --sf-brand:       #0B0D0F;   /* FILL surfaces — the CTA card, primary fills */
  --sf-brand-text:  #F4F6F7;

  --sf-accent-1: #E3E6E8;
  --sf-accent-2: #A9AFB5;
  --sf-accent-3: #2A2F34;
  --sf-accent-4: #14181B;
  --sf-accent-5: #08090A;
  --sf-accent-hover: #14181B;
  --sf-grad-from: #3A4046;
  --sf-grad-to:   #0B0D0F;

  /* ── CHROME — the nav bar and the footer are BLACK, silver-inked.
        This is the single strongest carrier of the identity: the logo is
        silver artwork on black, so black chrome is the artwork's own ground
        and the mark needs no filter, no plate and no knock-out to sit on it.
        The quiet ink is a SOLVED second colour, never an alpha fade — a faded
        ink on a fixed bar composites whatever scrolls under it. ── */
  --sf-chrome-bg:        #0B0D0F;
  --sf-chrome-ink:       #F4F6F7;  /* 17.6:1 */
  --sf-chrome-ink-dim:   #A9AFB5;  /*  8.7:1 */
  --sf-chrome-accent:    #C9CED3;  /* 12.2:1 */
  --sf-chrome-wash-from: #08090A;
  --sf-chrome-wash-to:   #191D20;
  --sf-chrome-wash: linear-gradient(104deg, var(--sf-chrome-wash-from) 0%, var(--sf-chrome-wash-from) 26%, var(--sf-chrome-wash-to) 100%);

  /* The nav is a floating pill (nav-surface: floating). The PILL is graphite
     and the strip behind it is obsidian, so the pill still reads as a pill
     instead of dissolving into a single black slab. */
  --sf-chrome-nav-bg:      #16191C;
  --sf-chrome-nav-ink:     #F4F6F7;
  --sf-chrome-nav-ink-dim: #AEB4BA;  /* 8.4:1 on the pill */
  --sf-chrome-nav-accent:  #C9CED3;
  --sf-nav-bg:     #08090A;
  --sf-nav-shadow: 0 1px 0 rgb(255 255 255 / 0.06);

  /* The artwork is already silver-on-transparent. Every filter is a no-op. */
  --sf-logo-filter:        none;
  --sf-logo-filter-nav:    none;
  --sf-logo-filter-chrome: none;
  --sf-logo-filter-foot:   none;

  --sf-contrast-bg:     #0B0D0F;
  --sf-contrast-ink:    #F4F6F7;
  --sf-contrast-muted:  #9AA1A7;
  --sf-contrast-accent: #C9CED3;

  --sf-photo-bg: #F1F3F4;   /* the plate under every product photo */

  /* THE LAST THREE HUES IN theme.css, found by scanning every token it declares
     for channel spread rather than by looking for them. They are easy to miss
     because none of them is named like a brand colour:
       --sf-hero-wash  the radial bloom behind EVERY product photo
                       (card-media-bg: glow) and the hero media tint wash
       --sf-soft-bg    the ground of the batch chip and the soft badge
       --sf-soft-ink   its ink — and this one was the full teal, #2E6F7E
     A palette is not monochrome until the scan comes back empty. */
  --sf-hero-wash: #EDF0F2;
  --sf-soft-bg:   #EDEFF1;
  --sf-soft-ink:  #2A2F34;   /* 11.5:1 on the chip */

  /* Dim ink on the black CTA card. Solved against #0B0D0F, not faded. */
  --sf-ctaband-dim-solved: #AEB4BA;

  --sf-glass-fill:        rgb(255 255 255 / 0.66);
  --sf-glass-fill-strong: rgb(255 255 255 / 0.88);
  --sf-btn-hover-overlay: rgb(255 255 255 / 0.16);
  --sf-shadow:      8 10 12;
  --sf-shadow-rgb:  8 10 12;
  --sf-scrim:       rgb(8 9 10 / 0.55);
  --sf-texture-alpha: 0.045;

  /* standards.html ships a SECOND register of its own — a warm rust, the only
     two hexes in that page. In a monochrome brand it is the one thing on the
     site that would still be a colour, so it becomes steel. Both keep the
     contrast roles the page's own comment specifies (legal as small ink, and
     the -ink variant walked down for 0.84rem links on the tinted band). */
  --pg-warm:     #5A6167;   /* 6.2:1 on white, 5.6:1 on the band */
  --pg-warm-ink: #3D4348;   /* 9.6:1 on white */
  --pg-warm-on:  #FFFFFF;   /* ink ON a --pg-warm fill — 6.3:1 here */

  /* THE QUIET INK — see "THE FADED-INK TRAP" at the foot of this file. This is
     the third ink, below --sf-muted: quiet enough to sit under a heading,
     solved rather than faded, so it holds its ratio on whatever it lands on. */
  --sf-quiet: #666C71;      /* 4.8:1 on white, 4.4:1 on the band — small text */

  /* THE TWO SURVIVING HUES. See "STATUS" at the foot of this file: normal is
     monochrome, and colour is reserved for the states that need attention. */
  --vt-warn: #8A5308;       /* 6.3:1 on white — low stock */
  --vt-bad:  #B3242B;       /* 6.6:1 on white — out of stock, errors */
}

/* ── THE DARK REGISTER ──────────────────────────────────────────────────────
   Applied to the sections that carry the dark half of the site:

     home      #hero          the black hero, silver helix, silver CTA
               #assurance     the assurance band under it
               #coa-proof     the certificate proof section (a white COA scan
                              on black is the strongest surface on the site)
     every     .page-header-bg  the page-title band, directly under the black
     inner       nav — so every page opens dark and resolves into light
     page      .pg-wash-soft    standards.html's alternating band

     every   .sf-footer       the black footer. It is in this list even though
     page                     its own ground comes from --sf-chrome-wash and
                              needs no help — see THE ALPHA-PANEL TRAP below.

   The CTA banner is not in this list on purpose: its card paints its ground
   FROM --sf-brand, so flipping the brand pair here would turn the card silver.
   It gets its own block further down for exactly that reason.

   ── THE ALPHA-PANEL TRAP, which is what put white text on a white panel ──
   A dark ground is not enough on its own. Several components paint their fill
   as an ALPHA MIX of a page token rather than as a colour of their own:

       .sf-ftr-ruo, .sf-ftr-notice  →  color-mix(in srgb, var(--sf-bg) 72%, transparent)

   Those two sit inside the footer, take their INK from --sf-footer-ink (which
   is chrome-level and therefore already near-white), and take their GROUND
   from --sf-bg — which, without this scope, is the ROOT value: white. So the
   footer went black, its ink went near-white, and the two panels inside it
   stayed a 72% white plate carrying near-white text. That is the "For Research
   Use Only" badge and the "Research Use Notice" panel, and neither is legible.

   The rule this is an instance of: WHEREVER A CHROME-LEVEL INK MEETS A
   PAGE-LEVEL GROUND, BOTH HAVE TO MOVE. Scoping the page tokens onto the
   footer is what makes the mix resolve against black, and it fixes every
   present and future panel in there rather than the two that happen to exist.
   ────────────────────────────────────────────────────────────────────────── */
body #hero,
body #assurance,
body #coa-proof,
body .page-header-bg,
body .pg-band.pg-wash-soft,
body .sf-footer,
body .gate-left,
body .gate-mobile-header {
  color-scheme: dark;

  --sf-bg:        #0B0D0F;
  --sf-band:      #121517;
  --sf-surface:   #16191C;
  --sf-elevated:  #1B1F22;
  --sf-text:      #F4F6F7;   /* 17.6:1 on the section ground */
  --sf-muted:     #A5ABB1;   /*  8.4:1 */
  --sf-quiet:     #7E8489;   /*  5.0:1 — the third ink, see the foot of file */

  /* Here silver IS the accent — it is the logo's own material, and on black it
     measures 12.2:1, so it carries ink, borders and fills alike. */
  --sf-accent:      #C9CED3;
  --sf-accent-text: #0B0D0F;
  --sf-brand:       #E3E7EA;
  --sf-brand-text:  #0B0D0F;

  --sf-accent-1: #2A2F34;
  --sf-accent-2: #6E7378;
  --sf-accent-3: #C9CED3;
  --sf-accent-4: #EDEFF1;
  --sf-accent-5: #FFFFFF;
  --sf-accent-hover: #FFFFFF;
  --sf-grad-from: #C9CED3;
  --sf-grad-to:   #8A9096;

  --sf-photo-bg: #1B1F22;
  --sf-hero-wash: #1F2327;
  --sf-soft-bg:   #22262A;
  --sf-soft-ink:  #D3D8DC;   /* 10.6:1 on the chip */
  --sf-contrast-bg:     #F4F6F7;
  --sf-contrast-ink:    #0B0D0F;
  --sf-contrast-muted:  #5A6066;
  --sf-contrast-accent: #2A2F34;

  /* These are declared on :root in theme.css with a var() inside, so they were
     SUBSTITUTED against the light ink and inherit as a literal — they do NOT
     follow --sf-text down here. Re-declaring them is not belt-and-braces:
     without it the borders, dividers and focus ring stay near-black on black. */
  --sf-border-color: rgb(244 246 247 / 0.16);
  --sf-divider-bg:   linear-gradient(rgb(244 246 247 / 0.16), rgb(244 246 247 / 0.16));
  --sf-focus-ring:   2px solid #C9CED3;

  --sf-glass-fill:        rgb(22 25 28 / 0.72);
  --sf-glass-fill-strong: rgb(22 25 28 / 0.92);
  --sf-btn-hover-overlay: rgb(0 0 0 / 0.18);
  --sf-shadow:      0 0 0;
  --sf-shadow-rgb:  0 0 0;
  --sf-texture-alpha: 0.06;

  /* standards.html's page-scoped tokens, same substitution trap as above. */
  --pg-warm:     #B9BFC5;
  --pg-warm-ink: #D6DBDF;
  /* --pg-warm is LIGHT on this register, so the ink that sits on a warm FILL
     has to invert with it. One token, two opposite roles: as small ink it must
     be light against the dark ground, as a fill it must carry dark text. That
     is why the fill's ink is its own token and not a baked #FFFFFF. */
  --pg-warm-on:  #0B0D0F;   /* 10.4:1 on the fill */
  --pg-line:     rgb(244 246 247 / 0.14);
  --pg-card:     #16191C;
  --pg-ink-60:   rgb(244 246 247 / 0.82);
  --pg-ink-45:   rgb(244 246 247 / 0.66);
  --pg-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5), 0 6px 18px rgb(0 0 0 / 0.4);
  --pg-shadow-md: 0 2px 4px rgb(0 0 0 / 0.5), 0 18px 44px rgb(0 0 0 / 0.45);

  --vt-warn: #E5B15C;       /* 10.0:1 on the section ground */
  --vt-bad:  #F5949A;       /*  8.9:1 */
}

/* ── THE INHERITED-COLOUR TRAP, and it is the one a token scope cannot fix ──
   Re-declaring --sf-text on a section moves every rule that READS the token.
   It does not move text that was never coloured by a rule at all.

   `color` is an inherited property. <body> resolves `color: var(--sf-text)`
   ONCE, against the ROOT --sf-text, and every descendant that sets no colour of
   its own inherits that computed near-black — through a dark section, because
   inheritance carries the resolved value, not the var() that produced it.

   index.html hid this: .hero-h1, .coa2-h and .coa2-v all name a colour, so
   they followed the scope. standards.html does not — .pg-h1, .pg-h2 and .pg-h3
   are pure type rules with no colour line, and they inherit. Measured on the
   dark page header: 1.07:1. That is the owner's "Tested, documented, and
   verified by batch" heading, effectively invisible.

   The fix is one declaration per dark region: re-resolve `color` AT the region,
   where --sf-text is the region's own. Any declaration beats inheritance, so no
   specificity is needed and nothing that sets its own colour is disturbed.

   .sf-footer and #assurance are NOT in this list on purpose — both already
   set a colour from the CHROME tokens (--sf-footer-ink / --sf-chrome-ink), and
   overriding those with a page token would take a designed decision away for
   no gain; the two values are identical here anyway. */
body #hero,
body #coa-proof,
body .page-header-bg,
body .pg-band.pg-wash-soft,
body .gate-left,
body .gate-mobile-header { color: var(--sf-text); }

/* ── THE GRADIENT HEADLINE, and why an accent RAMP cannot be ink here ───────
   `.grad-text` (the "Peptides" in the products and contact page titles) paints
   its glyphs with

       linear-gradient(135deg, var(--sf-accent-2), var(--sf-accent), var(--sf-accent-1))

   and clips it to the text. That works on a hued brand, where --sf-accent-1..5
   is a tonal ramp AROUND one colour and every step still separates from the
   page. It cannot work on a monochrome one: here the ramp spans white to
   black, so by definition half of it MATCHES the ground. On the dark page
   header the --sf-accent-1 stop measured 1.4:1 — the tail of the word faded
   out completely.

   This is latent in the master rather than caused by the palette: its own
   lightest tint (#B5CAD0) measures about 1.8:1 on a white ground, so the rule
   was already spending a third of the gradient on an invisible stop. A
   monochrome palette just takes it from marginal to total.

   Replaced with a ramp built from the three INK tokens, which are solved
   against the ground per register and therefore legible in both. It also
   happens to be the right picture: mid-tone into full-strength and back is a
   brushed-metal sweep, which is exactly what the logo's lettering does.
   Worst stop measured: 4.8:1 light, 5.0:1 dark.

   background-IMAGE, not the `background` shorthand — the shorthand would reset
   background-clip and the glyphs would fill with a solid box. */
body .grad-text {
  background-image: linear-gradient(135deg,
    var(--sf-muted) 0%,
    var(--sf-text) 52%,
    var(--sf-quiet) 100%);
}

/* ── THE AGE GATE'S PHOTO PANEL ─────────────────────────────────────────────
   gate.html's left panel is a dark photographic aside, and it broke in a way
   worth writing down because MY change is what broke it.

   `.gate-left-overlay` paints its vignette as
       color-mix(in srgb, var(--sf-bg) 30%, transparent) → transparent →
       color-mix(in srgb, var(--sf-bg) 50%, transparent)
   which is correct and invisible while --sf-bg is DARK: it deepens the top and
   bottom of the photograph so the mark and the headline have a ground. The
   moment the page ground became WHITE, that same declaration became a 30–50%
   WHITE wash over the photograph — the panel washed out to mid-grey and the
   white headline inside it fell to 2.42:1.

   That is the alpha-panel trap in its second form: not a light panel on a dark
   ground, but a LIGHT-TOKEN OVERLAY on a dark region. Same cause, same fix —
   the region gets the page tokens that match what it actually is.

   The ground itself was a baked #050d1a, a navy: the one panel on the site
   still carrying a hue, and the largest single surface a visitor meets, since
   the gate is the first page. Obsidian, like the logo's own ground.

   Not touched: everything in sf-gate.css. That file is already fully
   token-driven — its hexes are var() FALLBACKS, not values — so it re-themes
   itself from the register above and needs nothing from here. */
body .gate-left { background-color: #08090A; }

/* Both "Back to site" links fade --sf-text toward transparent (30% and 35%),
   which is the faded-ink trap again — measured 1.00:1 on the panel, the worst
   ratio anywhere on the site. --sf-quiet resolves per register, so this is
   correct on the dark panel at desktop AND on the light card at mobile. */
body .gate-back,
body .gate-back-mobile { color: var(--sf-quiet); }

/* .gate-mobile-header is the same trap in its purest form: at mobile widths
   .gate-left becomes position:fixed;inset:0 — a full-bleed dark backdrop — and
   the header sits ON it without being INSIDE it. Overlap is not ancestry, so
   the header inherited the LIGHT register and its back-link measured 3.75:1 on
   black. It is in both dark-register lists above for that reason, and this is
   the case an ancestor-based audit cannot see: it has to be measured at the
   pixel, against what is actually painted underneath. */

/* The warm fill, now that --pg-warm inverts per register (see --pg-warm-on).
   The master bakes `color: #FFFFFF` into .pg-btn-warm, which is correct only
   while the fill is dark. Measured white-on-silver before this: 1.85:1. */
body .pg-btn-warm { color: var(--pg-warm-on); }

/* ── THE BLACK CTA CARD ─────────────────────────────────────────────────────
   #cta-banner (home) and #coa (products) are a black card floating on the
   white page ground — the light/dark seam stated as a single element, and the
   reason this card is not in the section list above.

   It cannot take the dark register wholesale. `.sf-ctaband-card` declares
   `--sf-ctaband-bg: var(--sf-brand)` ON ITSELF, so re-declaring --sf-brand on
   the same element as a light silver would repaint the card silver — the exact
   opposite of the intent. What it needs is the dark register MINUS the brand
   pair: the card's ground stays black and everything that reads INK inside it
   goes light.

   THE DEFECT THIS FIXES, and it is a specificity fight, not a colour mistake.
   The secondary button carries three classes — .sf-ctaband-btn-ghost, which
   colours it var(--sf-ctaband-ink) (near-white, correct), and .sf-btn-secondary,
   which theme.css colours from the ghost option at

       body.opt-secondary-style-ghost .sf-btn-secondary   (0,2,1)

   That beats `.sf-ctaband-btn-ghost` (0,1,0), so the button takes --sf-text —
   the ROOT --sf-text, near-black, on a near-black card. Measured 1.01:1:
   "Contact Support" was invisible.

   Fixing the button's own rule would fix one button. Scoping --sf-text (and
   the rest of the ink set) to the card fixes every rule that reaches for a
   page ink inside it, including ones added later, and it needs no !important
   and no specificity race.
   ────────────────────────────────────────────────────────────────────────── */
body .sf-ctaband-card {
  color-scheme: dark;

  --sf-text:   #F4F6F7;
  --sf-muted:  #AEB4BA;
  --sf-quiet:  #8A9096;
  --sf-bg:        #0B0D0F;
  --sf-band:      #121517;
  --sf-surface:   #16191C;
  --sf-elevated:  #16191C;

  --sf-accent:      #C9CED3;
  --sf-accent-text: #0B0D0F;
  --sf-accent-1: #2A2F34;
  --sf-accent-2: #6E7378;
  --sf-accent-3: #C9CED3;
  --sf-accent-4: #EDEFF1;
  --sf-accent-5: #FFFFFF;
  --sf-accent-hover: #FFFFFF;

  --sf-border-color: rgb(244 246 247 / 0.24);
  --sf-divider-bg:   linear-gradient(rgb(244 246 247 / 0.24), rgb(244 246 247 / 0.24));
  --sf-focus-ring:   2px solid #F4F6F7;
  /* NOT --sf-brand / --sf-brand-text. See above — the card's ground is those. */
}

/* ── THE HERO FIGURE ────────────────────────────────────────────────────────
   The helix takes its stroke from --sf-accent, so on the dark register it is
   already silver — it re-tints with the palette rather than being baked, which
   is the whole point of the motif lane. What it does NOT do by itself is
   change its WEIGHT: 0.174 was solved against a near-white ground, and on
   black the same alpha reads as almost nothing. Silver linework on black is
   the logo's own idiom, so the figure earns more presence here.

   Both the base opacity AND the one-second rise move together: the rise is not
   `forwards`, so a mismatch would show the figure settle DOWN to a different
   value one second after load — exactly the onset transient the original
   keyframe exists to avoid.
   ────────────────────────────────────────────────────────────────────────── */
body #hero .sf-hero-motif { opacity: 0.30; }

@media (prefers-reduced-motion: no-preference) and (update: fast) {
  body #hero .sf-hero-motif { animation: vt-motif-rise 1s cubic-bezier(.33, 1, .68, 1) 1; }
  @keyframes vt-motif-rise { from { opacity: 0; } to { opacity: 0.30; } }
}
/* Same inversion the master applies: a reader asking for more contrast is
   asking for the headline to win, so the decoration recedes. */
@media (prefers-contrast: more) { body #hero .sf-hero-motif { opacity: 0.13; } }

/* ── THE SEAM ───────────────────────────────────────────────────────────────
   Where a dark section meets the light page the boundary is the colour change
   itself and needs no line. Where a dark section ENDS a page region, a
   hairline of the section's own silver keeps the edge from reading as a
   printing error rather than as a decision. */
body .page-header-bg,
body #coa-proof,
body #assurance { border-bottom: 1px solid rgb(201 206 211 / 0.16); }

/* ── THE ONE BAKED COLOUR IN THE COA SECTION ────────────────────────────────
   `#coa-proof .coa2-readout` carries `border: 1px solid rgba(159,193,236,0.16)`
   — a literal cornflower blue, the only hex in that whole block that does not
   resolve through a token, so it is the one edge on the site that cannot
   follow the palette. On a monochrome brand it reads as a faint blue halo
   around the certificate readout. Silver at the same alpha. */
body #coa-proof .coa2-readout { border-color: rgb(201 206 211 / 0.18); }

/* ── THE FADED-INK TRAP ─────────────────────────────────────────────────────
   Two places in the master set a quiet ink by fading --sf-text toward
   TRANSPARENT rather than by naming a colour:

       .pillar-desc            color-mix(in srgb, var(--sf-text) 55%, transparent)
       #coa-proof .coa2-cap    color-mix(in srgb, var(--sf-text) 44%, transparent)

   A percentage is not a contrast ratio. The same 55% that measures 6.9:1 on
   one ground measures 4.17:1 on another, because the fade walks the ink toward
   whatever is behind it — and what is behind it now differs by section. Both
   measured BELOW 4.5:1 here (4.17 and 4.13) and neither is large text.

   Repairing the percentages would be guessing again on the next palette. They
   take --sf-quiet instead: a SOLVED third ink, one step below --sf-muted,
   declared once per register and therefore correct on the ground it is
   actually painted on. Same reason the chrome tokens are solved rather than
   faded (BUILD-DEFAULTS §2a) — this is that rule applied one level in.

   Measured after: 4.81:1 (pillar-desc, light) and 5.02:1 (coa2-cap, dark). */
body .pillar-desc,
body #coa-proof .coa2-cap { color: var(--sf-quiet); }

/* ── STATUS: NO COLOUR UNLESS SOMETHING NEEDS ATTENTION ─────────────────────
   The storefront ships a baked status palette that resolves through no token
   at all — emerald #059669, red #EF4444, amber #B45309, literals in ten files.
   On a monochrome brand the emerald is the only coloured thing on the product
   page, and it was failing anyway: "In Stock" measured 3.54:1 and the "Save 5%"
   chips 3.77:1, both under the 4.5 they need.

   THE RULE, and it is a design decision the owner should know about: the
   NORMAL state goes monochrome and the EXCEPTIONS keep a hue. In stock, COA
   available, tested, saving — those all state themselves in words, so the
   colour was carrying no information the label was not already carrying, and
   dropping it costs nothing. Low stock and out of stock are the states a
   reader needs to catch without reading, so they stay amber and red — retoned
   off the market default to values that pass on both registers.

   The result reads as intended rather than as leftover: a page with one red
   line on it means something, where a page with green, amber and red on it
   means nothing in particular.

   WHY THE ATTRIBUTE SELECTORS. Most of these are set by JS as INLINE styles
   (`label.style.color = '#059669'`), which no ordinary rule can reach. Matching
   the serialized inline value is what keeps the three stock states DISTINCT —
   a blanket `.stock-label { … !important }` would paint in-stock, low-stock and
   out-of-stock the same colour and destroy the signal this section is about.
   Chrome serializes those to `color: rgb(5, 150, 105)` and friends; the JS
   literals are fixed, so the match is stable.

   ORDER MATTERS BELOW. `[style*="color: rgb(…)"]` is a SUBSTRING match, so it
   also matches `background-color: rgb(…)`. The fill rules therefore come last
   and set both halves of the pair, or a green-filled button would end up with
   its text the same colour as its background. */
body .stock-label,
body .sf-stock,
body .vol-card-save,
body .vol-summary-saving,
body #vol-eyebrow,
body .tested-pill,
body .coa-guarantee .seal { color: var(--sf-accent); }
body .tested-pill {
  background: color-mix(in srgb, var(--sf-accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--sf-accent) 30%, transparent);
}

body [style*="color: rgb(5, 150, 105)"] { color: var(--sf-accent) !important; }
body [style*="color: rgb(180, 83, 9)"]  { color: var(--vt-warn)   !important; }
body [style*="color: rgb(239, 68, 68)"] { color: var(--vt-bad)    !important; }

body [style*="background: rgb(5, 150, 105)"],
body [style*="background-color: rgb(5, 150, 105)"] {
  background: var(--sf-accent) !important;
  border-color: var(--sf-accent) !important;
  color: var(--sf-accent-text) !important;
}

/* ── THE FADED-INK TRAP, PART TWO: 88 OF THEM, IN style ATTRIBUTES ──────────
   The two class-level fades above were not the whole story. Across the built
   pages there are 88 INLINE declarations of the same shape —

       style="…;color:color-mix(in srgb, var(--sf-text) 35%, transparent);…"

   — on back-links, timestamps, field hints, order metadata, empty-state lines.
   No stylesheet rule can reach an inline style, which is why these are matched
   on the attribute and carry !important. That is the one place !important is
   the correct tool rather than a shortcut: the declaration being overridden is
   itself an inline one, so there is no lower-specificity way in.

   THE THRESHOLD IS ARITHMETIC, NOT TASTE. Compositing --sf-text over its own
   ground at alpha a and solving for 4.5:1 gives a >= 0.562 on the light
   register (near-black over white) and a >= 0.476 on the dark one. 57% is the
   binding number, so every fade BELOW it is listed and everything at or above
   is left exactly as the master wrote it. The list is generated from the built
   pages, not typed: percentages, and both spacings the markup actually uses.

   WHY EACH ONE IS TWO SELECTORS. `[style*="color: …"]` is a substring match,
   and `border-color: …` ends in that same substring — the markup has
   `border-color: color-mix(in srgb, var(--sf-text) 45%…)` and a naive match
   would recolour that element's TEXT because of its BORDER. Anchoring each to
   the start of the attribute or to a preceding `;` makes `;color:` unable to
   match `;border-color:`, which is the whole point.

   They collapse to one solved ink. A 25% fade and a 55% fade were never two
   deliberate levels of emphasis — they were two guesses at the same "quiet"
   role, made on a ground that no longer exists.

   Percentages found, with counts:
   22%(1) 25%(5) 30%(4) 33%(1) 35%(12) 38%(1) 40%(10) 42%(4) 45%(16) 48%(1)
   50%(25) 55%(8) */
body [style^="color:color-mix(in srgb, var(--sf-text) 22%"],
body [style*=";color:color-mix(in srgb, var(--sf-text) 22%"],
body [style^="color: color-mix(in srgb, var(--sf-text) 25%"],
body [style*=";color: color-mix(in srgb, var(--sf-text) 25%"],
body [style^="color:color-mix(in srgb, var(--sf-text) 25%"],
body [style*=";color:color-mix(in srgb, var(--sf-text) 25%"],
body [style^="color: color-mix(in srgb, var(--sf-text) 30%"],
body [style*=";color: color-mix(in srgb, var(--sf-text) 30%"],
body [style^="color:color-mix(in srgb, var(--sf-text) 30%"],
body [style*=";color:color-mix(in srgb, var(--sf-text) 30%"],
body [style^="color: color-mix(in srgb, var(--sf-text) 33%"],
body [style*=";color: color-mix(in srgb, var(--sf-text) 33%"],
body [style^="color:color-mix(in srgb, var(--sf-text) 35%"],
body [style*=";color:color-mix(in srgb, var(--sf-text) 35%"],
body [style^="color: color-mix(in srgb, var(--sf-text) 35%"],
body [style*=";color: color-mix(in srgb, var(--sf-text) 35%"],
body [style^="color: color-mix(in srgb, var(--sf-text) 38%"],
body [style*=";color: color-mix(in srgb, var(--sf-text) 38%"],
body [style^="color: color-mix(in srgb, var(--sf-text) 40%"],
body [style*=";color: color-mix(in srgb, var(--sf-text) 40%"],
body [style^="color:color-mix(in srgb, var(--sf-text) 40%"],
body [style*=";color:color-mix(in srgb, var(--sf-text) 40%"],
body [style^="color: color-mix(in srgb, var(--sf-text) 42%"],
body [style*=";color: color-mix(in srgb, var(--sf-text) 42%"],
body [style^="color:color-mix(in srgb, var(--sf-text) 45%"],
body [style*=";color:color-mix(in srgb, var(--sf-text) 45%"],
body [style^="color: color-mix(in srgb, var(--sf-text) 45%"],
body [style*=";color: color-mix(in srgb, var(--sf-text) 45%"],
body [style^="color: color-mix(in srgb, var(--sf-text) 48%"],
body [style*=";color: color-mix(in srgb, var(--sf-text) 48%"],
body [style^="color:color-mix(in srgb, var(--sf-text) 50%"],
body [style*=";color:color-mix(in srgb, var(--sf-text) 50%"],
body [style^="color: color-mix(in srgb, var(--sf-text) 50%"],
body [style*=";color: color-mix(in srgb, var(--sf-text) 50%"],
body [style^="color:color-mix(in srgb, var(--sf-text) 55%"],
body [style*=";color:color-mix(in srgb, var(--sf-text) 55%"],
body [style^="color: color-mix(in srgb, var(--sf-text) 55%"],
body [style*=";color: color-mix(in srgb, var(--sf-text) 55%"] {
  color: var(--sf-quiet) !important;
}

/* ── THE MOBILE DRAWER IS A PAGE SURFACE, NOT CHROME ────────────────────────
   #snav-mobile-menu paints `color-mix(in srgb, var(--sf-bg) 98%, transparent)`
   — the PAGE ground, deliberately; index.html says so in its own comment
   ("THE DRAWER IS NOT THE BAR"). Its links, however, take the NAV inks, which
   this palette moved to near-silver so they could sit on a black bar.

   White drawer, silver links: 2.2:1. On the surface every phone visitor uses
   to navigate the site. It is the alpha-panel trap for the third time and in
   the worst place, and no scroll pass finds it because the drawer is closed.

   Fixed the same way each time: the region gets the tokens that match what it
   actually is. Remapping the nav inks here — rather than colouring
   .snav-mobile-link directly — also covers the search field, the section
   labels and anything added to the drawer later. */
body #snav-mobile-menu {
  --sf-nav-ink:            var(--sf-text);
  --sf-nav-ink-dim:        var(--sf-muted);
  --sf-chrome-nav-ink:     var(--sf-text);
  --sf-chrome-nav-ink-dim: var(--sf-muted);
  --sf-chrome-nav-accent:  var(--sf-accent);
  --sf-chrome-ink:         var(--sf-text);
  --sf-chrome-ink-dim:     var(--sf-muted);

  /* The mark in the drawer head is the same problem in artwork rather than in
     text: the logo is silver-on-transparent, which is right on black chrome
     and near-invisible on this white panel. Not a silhouette — brightness
     scales the artwork's own range down to #101011–#434444, so the brushed
     gradient survives and it reads as the same mark rendered in graphite
     rather than as a black blob. */
  --sf-logo-filter: brightness(0.28) saturate(0);
}