/* =========================================================================
   ProGrade — Design Tokens
   Source of truth: the cross-reference/fitment design mockup
   (design-crossref-fitment.html). Navy + gold system, graphite text, white
   cards on a warm-neutral page, IBM Plex Mono part numbers, Archivo display.
   These custom properties are the ONLY place raw brand values live.
   ========================================================================= */

:root {
  /* --- Ink / text --------------------------------------------------------- */
  --pg-graphite:   #111315;  /* primary text (near-black) */
  --pg-ink-2:      #3A3D40;  /* secondary text */
  --pg-ink-3:      #5B6167;  /* muted text, table labels */

  /* --- Navy (primary accent / structure) --------------------------------- */
  --pg-navy:       #1C2546;  /* primary accent: ProGrade part numbers, buttons, dark bands */
  --pg-navy-2:     #2A3560;  /* hover/pressed navy */

  /* --- Gold (secondary accent / highlight) ------------------------------- */
  --pg-gold:       #B99031;  /* the "filter gold" highlight — use with discipline */
  --pg-gold-deep:  #8F6E22;  /* deeper gold: flags, small marks */

  /* --- Signal ------------------------------------------------------------- */
  --pg-red:        #C4212E;  /* accent mark, wholesale CTA outline, FAQ toggle */
  --pg-green:      #3E7A35;  /* direct-match verdict / "fits" — meaningful, sparing */
  --pg-green-tint: #EEF4EC;  /* soft green wash for proof ticks */

  /* --- Surfaces & lines --------------------------------------------------- */
  --pg-page:       #D7D6CF;  /* outermost body background (warm neutral) */
  --pg-white:      #F6F7F4;  /* section background (off-white) */
  --pg-card:       #FFFFFF;  /* card surface */
  --pg-steel:      #A8ADB2;  /* arrows, faint separators */
  --pg-line:       #E4E3DE;  /* hairline borders */
  --pg-line-2:     #D5D4CE;  /* stronger hairline / card borders */

  /* --- Radii, shadow ------------------------------------------------------ */
  --pg-radius:     5px;
  --pg-radius-lg:  8px;
  --pg-shadow:     0 1px 2px rgba(17,19,21,.05), 0 6px 20px rgba(17,19,21,.06);

  /* --- Spacing scale (base 8px) ------------------------------------------ */
  --pg-space:      8px;
  --pg-space-1:    8px;
  --pg-space-2:    16px;
  --pg-space-3:    24px;
  --pg-space-4:    32px;
  --pg-space-6:    48px;
  --pg-space-8:    64px;

  /* --- Layout ------------------------------------------------------------- */
  --pg-maxw:       1180px;

  /* --- Typefaces (self-hosted; see fonts.css) ----------------------------- */
  --pg-font-head: "Archivo", system-ui, sans-serif;        /* display / headings */
  --pg-font-body: "Inter", system-ui, sans-serif;          /* body copy */
  --pg-font-mono: "IBM Plex Mono", ui-monospace, monospace;/* PART NUMBERS & SPEC VALUES */

  /* --- Fluid type scale --------------------------------------------------- */
  --pg-fs-display:     clamp(2.5rem, 1.90rem + 2.7vw, 3.5rem);
  --pg-fs-h1:          clamp(2rem,   1.35rem + 2.9vw, 3.125rem);  /* 32 → 50 (h1.big) */
  --pg-fs-h2:          0.9375rem;                                 /* 15px uppercase section head */
  --pg-fs-h3:          1.25rem;
  --pg-fs-body:        1.0625rem;                                 /* 17px lead / body */
  --pg-fs-small:       0.875rem;                                  /* 14 */
  --pg-fs-mono-label:  0.65625rem;                               /* ~10.5px mono labels */

  /* --- Line heights ------------------------------------------------------- */
  --pg-lh-tight:  1.02;   /* display headings */
  --pg-lh-body:   1.6;    /* long-form body copy */
}