/* ==========================================================================
   eSaabParts color + legibility pass
   Load AFTER bootstrap-test.min.css so these win.
   Every text color below passes WCAG AA (4.5:1) on #FFFFFF, #F9F9F9 and #F2F2F2.
   ========================================================================== */

:root {
  /* Brand */
  --esp-red:          #A90000; /* the one brand red: buttons, headings, cart badge   (7.8:1 on white) */
  --esp-red-hover:    #8A0000;
  --esp-charcoal:     #30363C; /* nav bar, primary text                              (12.2:1) */

  /* Text */
  --esp-text:         #30363C;
  --esp-text-muted:   #666666; /* replaces #808080 and #697178 for small gray text    (5.4–5.7:1) */
  --esp-link:         #1F5F8B; /* part-number + breadcrumb links, so red isn't doing every job (6.8:1) */
  --esp-link-hover:   #164766;

  /* Status (use sparingly; the word should carry the meaning, color only backs it up) */
  --esp-instock:      #2E7D32; /* white text on it = 5.1:1 (was #469408 = 3.8:1) */
  --esp-unavailable:  #A90000; /* "No longer available", "Currently unavailable" */
  --esp-info-btn:     #0277A8; /* "Request Part"; white text on it = 5.0:1 (was #029ACF = 3.2:1) */
  --esp-moved:        #7B3A80; /* "Moved - Go To" badge; white text = 7.6:1 */

  /* Surfaces (unchanged) */
  --esp-bg:           #FFFFFF;
  --esp-bg-alt:       #F9F9F9;
  --esp-bg-panel:     #F5F6F7;
}

/* --------------------------------------------------------------------------
   1. Readable weights. Thin (100/200) text at 12–14px washes out even when
      the color passes. This does more for legibility than any color change.
   -------------------------------------------------------------------------- */
body,
td, th, p, li, span, small, label {
  font-weight: 400;
}
b, strong, h1, h2, h3, h4, h5, h6, .btn { font-weight: 700; }

/* --------------------------------------------------------------------------
   2. One red. Anything using #AE0000 / #BF0000 should read var(--esp-red).
   -------------------------------------------------------------------------- */
.btn-danger,
.btn-primary {
  background-color: var(--esp-red);
  border-color: var(--esp-red);
}
.btn-danger:hover, .btn-danger:focus,
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--esp-red-hover);
  border-color: var(--esp-red-hover);
}
.text-danger { color: var(--esp-red); }

/* --------------------------------------------------------------------------
   3. Links: blue-ish instead of red, so red means "action / warning" only.
      Swap the selectors for the ones on your part-number and breadcrumb links.
   -------------------------------------------------------------------------- */
a,
.breadcrumb a {
  color: var(--esp-link);
}
a:hover, a:focus,
.breadcrumb a:hover {
  color: var(--esp-link-hover);
}
.breadcrumb > .active { color: var(--esp-text-muted); }

/* --------------------------------------------------------------------------
   4. Muted gray text (position numbers, current breadcrumb, qty stepper)
   -------------------------------------------------------------------------- */
.text-muted,
.muted {
  color: var(--esp-text-muted);
}

/* --------------------------------------------------------------------------
   5. Row notes under each part ("Need: 14", "B207L", "Not as separate spare
      part", descriptions). These currently use Bootstrap-2-era colors
      (#3A87AD info, #468847 success, #C09853 warning) plus magenta #AD3A87.
      Make them all one quiet color; let the words do the work.
   -------------------------------------------------------------------------- */
.text-info,
.text-success,
.text-warning {
  color: var(--esp-text-muted);
  font-weight: 400;
}
/* TODO: add the class you use for the magenta description notes, e.g.
   .part-note-desc { color: var(--esp-text-muted); } */

/* --------------------------------------------------------------------------
   6. Status badges and buttons
   -------------------------------------------------------------------------- */
/* "20+ in" / "10 in" stock badge — replace .label-success with your class if different */
.label-success,
.badge-success {
  background-color: var(--esp-instock);
  color: #FFFFFF;
}

/* "Request Part" — replace .btn-info with your class if different */
.btn-info {
  background-color: var(--esp-info-btn);
  border-color: var(--esp-info-btn);
  color: #FFFFFF;
}

/* "Moved - Go To" badge — add your class here */
/* .part-moved { background-color: var(--esp-moved); color: #FFFFFF; } */

/* --------------------------------------------------------------------------
   7. Diagram / parts-list pages (viewparts.php). Selectors taken from the
      live page and tested there.

      Why !important: viewparts.php has its own <style> block with
        .description-item > p { font-weight: lighter !important; }
        .parts-table .partnumber a { color: #AE0000 !important; ... }
      which beats any normal stylesheet rule. The cleaner fix is to delete
      those two !important declarations in viewparts.php; then you can drop
      the !important flags below.
   -------------------------------------------------------------------------- */

/* Row notes: all one muted color, regular weight
   (covers .text-comment magenta and .text-primary red "Engine ID" too) */
td.description-item p.hangingindent {
  color: var(--esp-text-muted) !important;
  font-weight: 400 !important;
}

/* Diagram position numbers (#808080, 3.5-3.9:1) */
td.text-center > small {
  color: var(--esp-text-muted) !important;
}

/* "Currently Unavailable" / "No Longer Available" / "Back Ordered" (#808080) */
.parts-table td.text-center > div.text-center {
  color: var(--esp-text-muted);
}

/* Current (last) item in the parts breadcrumb (#808080, 3.65:1) */
.parts-breadcrumb li:last-child a > span {
  color: var(--esp-text-muted) !important;
}

/* Part-number links: keep red, but the one brand red instead of #AE0000.
   To make them blue links instead, swap var(--esp-red) for var(--esp-link). */
.parts-table .partnumber a {
  color: var(--esp-red) !important;
}