/*
 * Per-brand global design tokens, scoped to body[data-theme="..."].
 * TOKENS ONLY — block-level brand rules belong in the block's own CSS
 * (docs/rules/styles.md rule 1).
 *
 * This file is render-blocking. Provenance, Figma node refs, contrast working
 * and the Figma-vs-production calls live in docs/rules/brand-tokens.md — keep
 * the reasoning there, not here.
 */

/* ── TractorPartsASAP — pure red brand, dark header, black footer. ───────── */

body[data-theme="tractorpartsasap"],
body[data-theme="tractorpartsasap"] .dropin-design {
  /* Color palette — red brand scale.
     Adobe drop-ins consume --color-brand-* directly. */
  --color-brand-50: #ffe5e5;
  --color-brand-100: #ffb8b8;
  --color-brand-300: #d21f17;
  --color-brand-500: #cd0000;
  --color-brand-600: #9c0000;
  --color-brand-700: #bc0000;
  --color-brand-800: #7a0000;

  /* Brand semantic aliases — readable names over the scale, for use in
     component-level tokens. */
  --color-brand-primary: var(--color-brand-500);
  --color-brand-dark: var(--color-surface-dark);

  /* Color palette — interactive */
  --color-button-hover: #d50d00;
  --color-button-active: #bc0000;
  --color-link-default: var(--color-brand-primary);
  --color-link-hover: #d21f17;

  /* Category tile "Shop »" hover accent. The base link is red, so hover shifts
     to the informational accent (global #6978d9) to read as a distinct accent
     rather than another red. */
  --color-category-shop--foreground-hover: var(--color-informational-500);

  /* Keyboard-focus ring (see unified :focus-visible rule in styles.css).
     Red brand reads clearly as a ring on the white page surface. */
  --color-focus-ring: var(--color-brand-primary);

  /* Promotional banner (AGPO-866). See brand-tokens.md. */
  --color-promo-banner-background: #222;
  --color-promo-banner-foreground: var(--color-neutral-50);
  --color-promo-banner-accent: var(--color-brand-primary);

  /* mobile phone strip number — production renders it Roboto Black */
  --phone-strip-font-weight: 900;

  /* Header search field — production .block-search parity. See brand-tokens.md. */
  --header-search-background: #f9f9f9;
  --header-search-border: #ccc;
  --header-search-border-width: 1px;
  --header-search-radius: 2px;
  --header-search-radius-mobile: 6px;

  /* design value. Darker than the Algolia module's #4a4a4a so it stays
     clearly apart from the #555 placeholder. */
  --header-search-text: #222;

  /* design value, one gray at every width — see brand-tokens.md */
  --header-search-placeholder: #555;

  /* The field is Roboto on both brands — Magento sets input[type=text] to
     Roboto directly, and form controls do not inherit body's family. TP
     production declares 400 but the asap theme's 300/500-only mapping
     renders the Medium face, so 500 here is 1:1. */

  /* SHOP ALL button. Its own token, like the search field's: the header
     buttons are 3px on BOTH brands (Magento @header-redesign__button-radius),
     so they do not follow the brand --button-border-radius (3px TP / 5px HR). */
  --header-button-radius: 3px;
  --header-search-font-family: roboto, "Roboto Fallback", system-ui, sans-serif;
  --header-search-placeholder-weight: 500;

  /* Autocomplete result panel — production Algolia parity. */
  --header-search-hit-hover-background: #f2f2f2;
  --header-search-hit-thumb-background: #fff;

  /* Autocomplete (AGPO-881). TP frame: red 3px top accent, neutral-gray sides;
     footer links are the same brand red. */
  --header-autocomplete-link: #cd0000;        /* footer links */
  --header-autocomplete-border-top: #cd0000;  /* panel top accent */
  --header-autocomplete-border: #bbb;          /* panel side/bottom frame */

  /* Hit name/SKU/category render Roboto Medium on production (its theme maps
     Roboto 400 to the Medium file); EDS ships a real 500 face, so match with 500. */
  --header-autocomplete-hit-name-weight: 500;
  --header-autocomplete-hit-sku-weight: 500;
  --header-autocomplete-hit-category-weight: 500;

  /* Name clamps to a single line + ellipsis, matching production's nowrap .info. */
  --header-autocomplete-hit-name-lines: 1;

  /* Footer renders Roboto Medium throughout (text + 16px links → 500). */
  --header-autocomplete-footer-weight: 500;
  --header-autocomplete-footer-link-weight: 500;

  /* "PRODUCTS" header lines up with the 10px left padding of the hit rows. */
  --header-autocomplete-source-header-pad-x: 10px;

  /* Password toggle offset — per-brand; input is taller here. Working in
     brand-tokens.md. */
  --dropin-eye-top: 3.65rem;

  /* ASAP-only accent colors (from Figma node 1523-8613) */
  --color-alto-30: rgb(215 215 215 / 30%);
  --color-tuna: #31333d;
  --color-kournikova: #ffe07d;
  --color-bright-red: #b40000;

  /* Background / surface */
  --background-color: var(--color-neutral-50);
  --color-surface-dark: #000;

  /* Neutral backdrop product/media thumbnails sit on (matches the white card
     surface so no-image and letterboxed tiles blend in). */
  --color-image-background: #fff;

  /* Typography — Roboto family per Figma. Values for tokens Figma didn't
     explicitly spec are interpolated to stay coherent with the H1/H3 scale. */
  --type-base-font-family: roboto, "Roboto Fallback", system-ui, sans-serif;
  --type-heading-color: #333;
  --type-display-1-font: 700 2.8rem/3.36rem var(--type-base-font-family);
  --type-display-1-letter-spacing: 0;
  --type-display-2-font: 700 2.4rem/2.88rem var(--type-base-font-family);
  --type-display-2-letter-spacing: 0;
  --type-display-3-font: 700 1.6rem/1.9rem var(--type-base-font-family);
  --type-display-3-letter-spacing: 0;
  --type-headline-1-font: 700 2rem/2.4rem var(--type-base-font-family);
  --type-headline-1-letter-spacing: 0;
  --type-headline-2-strong-font: 700 1.8rem/2.16rem var(--type-base-font-family);
  --type-headline-2-strong-letter-spacing: 0;
  --type-headline-2-default-font: 400 1.8rem/2.16rem var(--type-base-font-family);
  --type-headline-2-default-letter-spacing: 0;
  --type-body-1-default-font: 400 1.4rem/2.52rem var(--type-base-font-family);
  --type-body-1-default-letter-spacing: 0;
  --type-body-1-strong-font: 400 1.3rem/2.6rem var(--type-base-font-family);
  --type-body-1-strong-letter-spacing: 0;
  --type-body-1-emphasized-font: 700 1.4rem/2.52rem var(--type-base-font-family);
  --type-body-1-emphasized-letter-spacing: 0;
  --type-body-2-default-font: 400 1.3rem/2.34rem var(--type-base-font-family);
  --type-body-2-default-letter-spacing: 0;
  --type-body-2-strong-font: 700 1.3rem/2rem var(--type-base-font-family);
  --type-body-2-strong-letter-spacing: 0;
  --type-body-2-emphasized-font: 700 1.3rem/2rem var(--type-base-font-family);
  --type-body-2-emphasized-letter-spacing: 0;
  --type-button-1-font: 700 1.4rem/1.75rem var(--type-base-font-family);
  --type-button-1-letter-spacing: 0;
  --type-button-2-font: 600 1.4rem/1.75rem var(--type-base-font-family);
  --type-button-2-letter-spacing: 0;
  --type-details-caption-1-font: 400 1.3rem/2.8rem var(--type-base-font-family);
  --type-details-caption-1-letter-spacing: 0;
  --type-details-caption-2-font: 400 1.2rem/1.6rem var(--type-base-font-family);
  --type-details-caption-2-letter-spacing: 0;
  --type-details-overline-font: 700 1.2rem/2rem var(--type-base-font-family);
  --type-details-overline-letter-spacing: 0;

  /* Buttons — default variant (filled primary). */
  --color-button__default--background: var(--color-brand-primary);
  --color-button__default--background-hover: var(--color-button-hover);
  --color-button__default--background-active: var(--color-button-active);
  --color-button__default--foreground: var(--color-neutral-50);

  /* Buttons — secondary variant (white surface, dark outline + text).
     No hover state specified in Figma; states track the default value. */
  --color-button__secondary--background: var(--color-neutral-50);
  --color-button__secondary--background-hover: var(--color-neutral-50);
  --color-button__secondary--background-active: var(--color-neutral-50);
  --color-button__secondary--foreground: var(--color-brand-dark);
  --color-button__secondary--foreground-hover: var(--color-brand-dark);
  --color-button__secondary--border: var(--color-brand-dark);
  --color-button__secondary--border-hover: var(--color-brand-dark);

  /* Buttons — tertiary variant (text only). */
  --color-button__tertiary--background: transparent;
  --color-button__tertiary--background-hover: transparent;
  --color-button__tertiary--background-active: transparent;
  --color-button__tertiary--foreground: var(--color-brand-primary);
  --color-button__tertiary--foreground-hover: var(--color-brand-600);
  --color-button__tertiary--border: transparent;
  --color-button__tertiary--border-hover: transparent;

  /* Buttons — dark variant (nav "Shop All"). See brand-tokens.md. */
  --color-button__dark--background: #222;

  /* neutral-800 (#3d3d3d) ≈ production hover #3c3c3c (Δ1, token reuse) */
  --color-button__dark--background-hover: var(--color-neutral-800);
  --color-button__dark--background-active: var(--color-neutral-900);
  --color-button__dark--foreground: var(--color-neutral-50);

  /* Buttons — accent variant (filled blue). */
  --color-button__accent--background: #1e64b7;
  --color-button__accent--background-hover: #1a5599;
  --color-button__accent--background-active: #1a5599;
  --color-button__accent--foreground: var(--color-neutral-50);
  --button-padding-block: 17px;
  --button-padding-inline: 25px;
  --button-font-weight: 700;
  --button-border-radius: var(--shape-border-radius-1);

  /* Empty-state drop-in (illustrated message), as used by the mini-cart. The
     AGPO-1222 comps render it identically on both brands, so both theme blocks
     carry the same values rather than the per-brand button/heading tokens —
     HR Parts' own resolve to a 2.3rem/500 uppercase heading and a 5px button.
     The font family stays per-brand via --type-base-font-family. */
  --illustrated-message-heading-font: 700 1.8rem/1.2 var(--type-base-font-family);
  --illustrated-message-button-font: 700 1.4rem/1.25 var(--type-base-font-family);
  --illustrated-message-button-padding-block: 17px;
  --illustrated-message-button-padding-inline: 25px;
  --illustrated-message-button-border-radius: var(--shape-border-radius-1);

  /* Brand default — tighter than Adobe's 3px scale. Used by any component
     that doesn't override its own radius token. */
  --border-radius-default: 2px;

  /* Card — drop-in cards inherit the brand default. */
  --card-border-radius: var(--border-radius-default);

  /* Header — mobile hamburger bars (same grey as the input border) */
  --nav-hamburger-color: #686868;

  /* Header — mobile drawer menu rows. See brand-tokens.md. */
  --nav-drawer-link-color: #222;
  --nav-drawer-link-color-hover: #222;
  --nav-drawer-link-color-focus: #222;
  --nav-drawer-link-font-size: 1.6rem;
  --nav-drawer-link-font-weight: 500;
  --nav-drawer-row-padding: 2rem;

  /* Hero — featured-category chip link type (weight / size / line-height). */
  --featured-category-link-font: 700 1.6rem/1.2 var(--type-base-font-family);

  /* Hero — solid banner background palette. 3 dark + 3 light surfaces, each
     pairing its own foreground. See brand-tokens.md. */
  --hero-bg-brand: var(--color-brand-500);      /* #cd0000 red   */ --hero-fg-brand: #fff;
  --hero-bg-dark: var(--color-tuna);            /* #31333d slate */ --hero-fg-dark: #fff;
  --hero-bg-accent: #1e64b7;                     /* steel blue    */ --hero-fg-accent: #fff;
  --hero-bg-light: var(--color-brand-50);       /* #ffe5e5 tint  */ --hero-fg-light: var(--color-neutral-900);
  --hero-bg-muted: #f2f2f2;                       /* neutral gray  */ --hero-fg-muted: var(--color-neutral-900);
  --hero-bg-soft: #fff3cc;                        /* light gold    */ --hero-fg-soft: var(--color-neutral-900);

  /* Section Banner surfaces (AGPO-877) — client palette, independent of Hero.
     Ratios: brand 5.84:1, dark 15.91:1, light 11.39:1 — all WCAG AA. */
  --section-banner-bg-brand: var(--color-brand-500); --section-banner-fg-brand: #fff; /* #cd0000 red, white text */
  --section-banner-bg-dark: #222;  --section-banner-fg-dark: #fff;
  --section-banner-bg-light: #f3f3f3; --section-banner-fg-light: #333;

  /* Section Banner filled CTA, per surface (AGPO-1142). TPA's palette is red plus
     greys with no blue, so the button inverts against the banner rather than
     tinting: white on the two dark surfaces, near-black on the pale one. This also
     fixes 1.4.11 — the previous slate button was 2.15:1 on `brand` and the red one
     2.72:1 on `dark`, both under the 3:1 minimum. New ratios, label / button edge:
     brand 12.63:1 / 5.84:1, dark 12.63:1 / 15.91:1, light 12.63:1 / 11.39:1. */
  --section-banner-cta-bg-on-brand: #fff;  --section-banner-cta-fg-on-brand: #333;
  --section-banner-cta-bg-on-dark: #fff;   --section-banner-cta-fg-on-dark: #333;
  --section-banner-cta-bg-on-light: #333;  --section-banner-cta-fg-on-light: #fff;

  /* Hero — inline accent colors ([[c1]]/[[c2]]); *-on-light for dark-text
     banners. See brand-tokens.md. */
  --hero-accent-1: var(--color-kournikova);      /* #ffe07d warm gold */
  --hero-accent-2: var(--color-brand-100);       /* #ffb8b8 light red */
  --hero-accent-1-on-light: var(--color-brand-500); /* #cd0000 red  */
  --hero-accent-2-on-light: #1e64b7;                /* steel blue   */

  /* hairline between drawer rows (production rail-item border / Figma 84-156
     Line strokes); sublist rows use production's lighter #ccc */
  --nav-drawer-row-border: 1px solid var(--color-neutral-300);
  --nav-drawer-subrow-border: 1px solid #ccc;

  /* Forms — 40px production default; contextual forms set their own height. */
  --input-height: 40px;
  --input-border-color: #686868;
  --input-border-color-focus: var(--color-brand-primary);
  --input-border-radius: var(--border-radius-default);

  /* Value Proposition (AGPO-876). Copy weight 500 matches how production
     RENDERS, not how it is authored — see brand-tokens.md. */
  --vp-heading-font-size: 1.8rem;    /* 18px (mobile) */
  --vp-heading-font-size-lg: 2rem;   /* 20px (≥768px) */
  --vp-heading-line-height: 1.2;
  --vp-copy-font-size: 1.4rem;       /* 14px (mobile) */
  --vp-copy-font-size-lg: 1.6rem;    /* 16px (≥768px) */
  --vp-copy-line-height: 1.4;
  --vp-copy-font-weight: 500;
  --vp-icon-blend-mode: normal;
}

/* ── HR Parts — Open Sans, gold primary, blue secondary, dark charcoal.
 *    Headings declare 800 and render Open Sans 700, as production does.
 *    See docs/rules/brand-tokens.md. ──────────────────────────────────────── */

body[data-theme="hrparts"],
body[data-theme="hrparts"] .dropin-design {
  /* Color palette — gold brand scale.
     Adobe drop-ins consume --color-brand-* directly; these are the brand's
     primary actionable colors at 4 intensity steps. */
  --color-brand-50: #fff8e0;   /* lightest gold tint */
  --color-brand-100: #ffeaa8;
  --color-brand-300: #ffd96a;  /* light gold — tints */
  --color-brand-500: #f5a603;  /* primary gold — default actions */
  --color-brand-600: #da8504;  /* hover */
  --color-brand-700: #c47900;  /* active / darkest */
  --color-brand-800: #8a5503;

  /* Secondary — blue (informational/highlight). */
  --color-informational-500: #1b71f5;

  /* Brand semantic aliases — readable names over the scale, for use in
     component-level tokens. */
  --color-brand-primary: var(--color-brand-500);
  --color-brand-secondary: var(--color-informational-500);
  --color-brand-dark: var(--color-surface-dark);

  /* Color palette — interactive */
  --color-button-hover: var(--color-brand-600);
  --color-button-active: var(--color-brand-700);
  --color-link-default: var(--color-brand-primary);
  --color-link-hover: var(--color-brand-600);

  /* Category tile "Shop »" hover accent — the requested blue (#1b71f5), which
     is this brand's --color-informational-500 / --color-brand-secondary. */
  --color-category-shop--foreground-hover: var(--color-informational-500);

  /* Focus ring uses brand-700 gold (~3:1); the primary gold is ~1.7:1 on white. */
  --color-focus-ring: var(--color-brand-700);

  /* Promotional banner — same structure as TP; black text on the gold strip
     (white fails contrast). See brand-tokens.md. The copy itself is pure white,
     matching hrparts.com — #d9d9d9 read as washed-out grey on the dark bar
     (AGPO-1222). */
  --color-promo-banner-background: #222;
  --color-promo-banner-foreground: #fff;
  --color-promo-banner-accent: var(--color-brand-primary);
  --color-promo-banner-accent-foreground: #000;

  /* mobile phone strip number — black, same as TP (AGPO-1172); Open Sans
     renders it with its nearest loaded face. */
  --phone-strip-font-weight: 900;

  /* Header search field — same look as TPA, kept brand-scoped so HR can
     re-skin here later. See brand-tokens.md. */
  --header-search-background: #f9f9f9;
  --header-search-border: #ccc;
  --header-search-border-width: 1px;
  --header-search-radius: 2px;
  --header-search-radius-mobile: 6px;

  /* design value. Darker than the Algolia module's #4a4a4a so it stays
     clearly apart from the #555 placeholder. */
  --header-search-text: #222;

  /* design value, one gray at every width — see brand-tokens.md */
  --header-search-placeholder: #555;

  /* Header search is Roboto on HR production too, NOT Open Sans: the hrparts
     theme's `body { font-family: Open Sans !important }` never reaches a form
     control, and Magento's own `input[type=text]` rule pins Roboto.
     The weight is declared 400 there but renders the Medium face: the HR
     Magento pages ship only two Roboto @font-faces, 300 and 500, so 400
     resolves up to 500 — identical to TPA. Hence 500 here, not 400. */

  /* SHOP ALL button — 3px, same as TP. HR's rounder --button-border-radius
     (5px) does not reach the header; see the TractorPartsASAP note above. */
  --header-button-radius: 3px;
  --header-search-font-family: roboto, "Roboto Fallback", system-ui, sans-serif;
  --header-search-placeholder-weight: 500;

  /* Autocomplete result panel — see TractorPartsASAP note above. */
  --header-search-hit-hover-background: #f2f2f2;
  --header-search-hit-thumb-background: #fff;

  /* Autocomplete (AGPO-881) — gold panel frame, shared brand-red footer links. */
  --header-autocomplete-link: #cd0000;        /* footer links (red, like prod) */
  --header-autocomplete-border-top: #f5a602;  /* gold top accent */
  --header-autocomplete-border: #f5a602;       /* gold side/bottom frame */

  /* HR sets the hits in Open Sans and matches production's regular 400 weight. */
  --header-autocomplete-hit-name-weight: 400;
  --header-autocomplete-hit-sku-weight: 400;
  --header-autocomplete-hit-category-weight: 400;

  /* Production HR also clamps the name to one line (its .info is nowrap). */
  --header-autocomplete-hit-name-lines: 1;

  /* HR footer text is regular 400; the 16px links are SemiBold 600 (Open Sans,
     matching production). */
  --header-autocomplete-footer-weight: 400;
  --header-autocomplete-footer-link-weight: 600;

  /* "PRODUCTS" header lines up with the hit rows, same 10px as TP (AGPO-1194). */
  --header-autocomplete-source-header-pad-x: 10px;

  /* Password toggle offset — per-brand; input is shorter here. Working in
     brand-tokens.md. */
  --dropin-eye-top: 3.65rem;

  /* Background / surface */
  --background-color: var(--color-neutral-50);
  --color-surface-dark: #0f172a;

  /* Neutral backdrop product/media thumbnails sit on (matches the white card
     surface so no-image and letterboxed tiles blend in). */
  --color-image-background: #fff;

  /* Typography — Open Sans. Weights are DECLARED to match Magento production so
     QA's computed-style comparison passes. See brand-tokens.md. */
  --type-base-font-family: "Open Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  --type-fixed-font-family: "Roboto Mono", ui-monospace, "Liberation Mono", monospace, system-ui, sans-serif;
  --type-heading-color: #000;
  --type-display-1-font: 800 5.5rem/5.5rem var(--type-base-font-family);
  --type-display-1-letter-spacing: 0;
  --type-display-2-font: 800 4.4rem/4.4rem var(--type-base-font-family);
  --type-display-2-letter-spacing: -0.02em;
  --type-display-3-font: 800 3.5rem/3.5rem var(--type-base-font-family);
  --type-display-3-letter-spacing: 0;
  --type-headline-1-font: 600 2.8rem/2.8rem var(--type-base-font-family);
  --type-headline-1-letter-spacing: 0;
  --type-headline-2-strong-font: 500 2.3rem/2.3rem var(--type-base-font-family);
  --type-headline-2-strong-letter-spacing: 0;
  --type-headline-2-default-font: 400 2rem/2rem var(--type-base-font-family);
  --type-headline-2-default-letter-spacing: 0;
  --type-body-1-default-font: 400 1.6rem/1.6rem var(--type-base-font-family);
  --type-body-1-default-letter-spacing: 0;
  --type-body-1-strong-font: 700 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-strong-letter-spacing: 0;
  --type-body-1-emphasized-font: 700 1.6rem/2.4rem var(--type-base-font-family);
  --type-body-1-emphasized-letter-spacing: 0;
  --type-body-2-default-font: 500 1.4rem/1.4rem var(--type-base-font-family);
  --type-body-2-default-letter-spacing: 0;
  --type-body-2-strong-font: 700 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-strong-letter-spacing: 0;
  --type-body-2-emphasized-font: 700 1.4rem/2rem var(--type-base-font-family);
  --type-body-2-emphasized-letter-spacing: 0;
  --type-button-1-font: 700 1.6rem/1.6rem var(--type-base-font-family);
  --type-button-1-letter-spacing: 0;
  --type-button-2-font: 700 1.6rem/1.6rem var(--type-base-font-family);
  --type-button-2-letter-spacing: 0;
  --type-details-caption-1-font: 400 1.2rem/1.6rem var(--type-base-font-family);
  --type-details-caption-1-letter-spacing: 0;
  --type-details-caption-2-font: 400 1.2rem/1.6rem var(--type-base-font-family);
  --type-details-caption-2-letter-spacing: 0;
  --type-details-overline-font: 700 1.2rem/2rem var(--type-base-font-family);
  --type-details-overline-letter-spacing: 0.08em;

  /* Buttons — default variant (filled gold), per Figma "Button/Primary". */
  --color-button__default--background: var(--color-brand-primary);
  --color-button__default--background-hover: var(--color-button-hover);
  --color-button__default--background-active: var(--color-button-active);
  --color-button__default--foreground: var(--color-brand-dark);

  /* Buttons — secondary variant per Figma "Button/White".
     No hover state specified in Figma; states track the default value. */
  --color-button__secondary--background: var(--color-neutral-50);
  --color-button__secondary--background-hover: var(--color-neutral-50);
  --color-button__secondary--background-active: var(--color-neutral-50);
  --color-button__secondary--foreground: var(--color-brand-dark);
  --color-button__secondary--foreground-hover: var(--color-brand-dark);
  --color-button__secondary--border: var(--color-brand-dark);
  --color-button__secondary--border-hover: var(--color-brand-dark);

  /* Buttons — tertiary variant (text only, gold). */
  --color-button__tertiary--background: transparent;
  --color-button__tertiary--background-hover: transparent;
  --color-button__tertiary--background-active: transparent;
  --color-button__tertiary--foreground: var(--color-brand-primary);
  --color-button__tertiary--foreground-hover: var(--color-brand-600);
  --color-button__tertiary--border: transparent;
  --color-button__tertiary--border-hover: transparent;

  /* Buttons — dark variant (filled charcoal). Per Figma "Button/Dark". */
  --color-button__dark--background: var(--color-brand-dark);
  --color-button__dark--background-hover: var(--color-neutral-900);
  --color-button__dark--background-active: var(--color-neutral-900);
  --color-button__dark--foreground: var(--color-neutral-50);

  /* Buttons — accent variant (filled blue). Per Figma "Button/Blue". */
  --color-button__accent--background: var(--color-brand-secondary);
  --color-button__accent--background-hover: #1559c4;
  --color-button__accent--background-active: #1559c4;
  --color-button__accent--foreground: var(--color-neutral-50);
  --button-padding-block: 10px;
  --button-padding-inline: 21px;
  --button-font-weight: 700;
  --button-border-radius: 5px;

  /* Empty-state drop-in (illustrated message), as used by the mini-cart. The
     AGPO-1222 comps render it identically on both brands, so both theme blocks
     carry the same values rather than the per-brand button/heading tokens —
     HR Parts' own resolve to a 2.3rem/500 uppercase heading and a 5px button.
     The font family stays per-brand via --type-base-font-family. */
  --illustrated-message-heading-font: 700 1.8rem/1.2 var(--type-base-font-family);
  --illustrated-message-button-font: 700 1.4rem/1.25 var(--type-base-font-family);
  --illustrated-message-button-padding-block: 17px;
  --illustrated-message-button-padding-inline: 25px;
  --illustrated-message-button-border-radius: var(--shape-border-radius-1);
  --button-gap: 10px;
  --button-border-width: 2px;

  /* Brand default — matches the button family. */
  --border-radius-default: 5px;

  /* Card inherits the brand default. */
  --card-border-radius: var(--border-radius-default);

  /* Header — mobile hamburger bars (shared with TP: the unified header's
     drawer/hamburger inks are neutral grays, not brand colors; consumed by
     blocks/header/header.css) */
  --nav-hamburger-color: #686868;

  /* Header — drawer menu rows (TP production parity, see the TP block
     above for the value rationale) */
  --nav-drawer-link-color: #222;
  --nav-drawer-link-color-hover: #222;
  --nav-drawer-link-color-focus: #222;
  --nav-drawer-link-font-size: 1.6rem;
  --nav-drawer-link-font-weight: 500;
  --nav-drawer-row-padding: 2rem;

  /* Hero — featured-category chip link type (weight / size / line-height). */
  --featured-category-link-font: 700 1.6rem/1.2 var(--type-base-font-family);

  /* Hero — solid banner background palette, gold/blue pair. See brand-tokens.md. */

  /* NOTE: `brand` here is a LIGHT surface with DARK text (8.6:1); white would be
     2.0:1. TPA's `brand` is the opposite. See brand-tokens.md. */
  --hero-bg-brand: var(--color-brand-500);      /* #f5a603 brand orange, dark text */ --hero-fg-brand: var(--color-neutral-900);
  --hero-bg-dark: var(--color-surface-dark);    /* #0f172a slate  */ --hero-fg-dark: #fff;
  --hero-bg-accent: #1559c4;                     /* deep blue      */ --hero-fg-accent: #fff;
  --hero-bg-light: var(--color-brand-50);       /* #fff8e0 cream  */ --hero-fg-light: var(--color-neutral-900);
  --hero-bg-muted: #f2f2f2;                       /* neutral gray   */ --hero-fg-muted: var(--color-neutral-900);
  --hero-bg-soft: var(--color-brand-100);       /* #ffeaa8 soft gold tint, dark text */ --hero-fg-soft: var(--color-neutral-900);

  /* Section Banner surfaces (AGPO-877) — client palette, independent of Hero. */
  --section-banner-bg-brand: var(--color-brand-500); --section-banner-fg-brand: var(--color-neutral-900); /* #f5a603 orange, dark text */
  --section-banner-bg-dark: var(--color-neutral-900);  --section-banner-fg-dark: #fafafa;
  --section-banner-bg-light: #fafafa; --section-banner-fg-light: var(--color-neutral-900);

  /* Section Banner filled CTA, per surface (AGPO-1142). Stated explicitly rather
     than left to the block's fallbacks, so both brands' button palettes read side
     by side. These are the values HR already shipped — the client owns the HR
     comps and asked for no change. All pass, label / button edge: brand 17.85:1 /
     8.79:1, dark 7.16:1 / 7.16:1, light 17.85:1 / 17.10:1. */
  --section-banner-cta-bg-on-brand: var(--color-surface-dark);  --section-banner-cta-fg-on-brand: #fff;
  --section-banner-cta-bg-on-dark: var(--color-brand-500);      --section-banner-cta-fg-on-dark: var(--color-neutral-900);
  --section-banner-cta-bg-on-light: var(--color-surface-dark);  --section-banner-cta-fg-on-light: #fff;

  /* Hero — inline accent colors ([[c1]]/[[c2]]); *-on-light for dark-text
     banners. See brand-tokens.md. */
  --hero-accent-1: var(--color-brand-500);       /* #f5a603 gold   */
  --hero-accent-2: #8ec5ff;                       /* light blue     */
  --hero-accent-1-on-light: var(--color-brand-700);          /* #c47900 dark gold */
  --hero-accent-2-on-light: var(--color-informational-500);  /* #1b71f5 blue */
  --nav-drawer-row-border: 1px solid var(--color-neutral-300);
  --nav-drawer-subrow-border: 1px solid #ccc;

  /* Forms — 40px generic default; the Machine Finder sets its own height. */
  --input-height: 40px;
  --input-background: #ededed;
  --input-border-color: #acacac;
  --input-border-color-focus: var(--color-brand-primary);
  --input-border-radius: var(--border-radius-default);

  /* Value Proposition (AGPO-876) — fixed, non-scaling type. See brand-tokens.md. */
  --vp-heading-font-size: 1.8rem;    /* 18px */
  --vp-heading-font-size-lg: 1.8rem; /* 18px (no ≥768px step-up) */
  --vp-heading-line-height: 1.1;
  --vp-copy-font-size: 1.5rem;       /* 15px */
  --vp-copy-font-size-lg: 1.5rem;    /* 15px (no ≥768px step-up) */
  --vp-copy-line-height: 1.4667;     /* ~22px at 15px */
  --vp-copy-font-weight: 400;

  /* Icons ship on a white plate; multiply drops it onto the section surface. */
  --vp-icon-blend-mode: multiply;
}

/* H1–H3 and buttons are UPPERCASE on HR Parts per Figma. */
body[data-theme="hrparts"] h1,
body[data-theme="hrparts"] h2,
body[data-theme="hrparts"] h3,
body[data-theme="hrparts"] main a.button,
body[data-theme="hrparts"] button.button {
  text-transform: uppercase;
}

/* Brand block overrides live in their blocks (AGPO-865). Tokens only here. */