/* ==========================================================================
   The Measurement Lab — UI Greys (web only)
   --------------------------------------------------------------------------
   colors.css is the brand palette and states plainly that only those colours
   are permitted. The Claude Design output nonetheless introduced sixteen
   additional greys inline — text tints, hairline borders, surface edges —
   none of which exist in the brand system.

   They are preserved here rather than "corrected" to brand greys, because
   changing them would shift the approved design's contrast and edge weight
   across every section. But they are collected into tokens rather than left
   as loose hex values, so the set is visible, auditable, and changeable in
   one place if the brand system later absorbs them.

   FLAGGED FOR OLIVIA: this is a real (small) expansion of the palette beyond
   what TML_Brand_Assets.md permits. It is a design-system decision, not a
   porting one. Reconciling these to brand tokens is a sensible future-version
   task; doing it during the port would have been unrequested drift.

   Note none of these are the forbidden legacy colours (#1F4E79, #2E75B6,
   #333333, #444444, #888888) — that rule is not violated.
   ========================================================================== */

:root {
  /* ---- Text tints (dark -> light) ---- */
  --ui-text-strong:  #4a4a5e; /* body copy in hero, thesis, cards       */
  --ui-text:         #5a5a6e; /* secondary body, blurbs, footer links   */
  --ui-text-soft:    #6a6a7e; /* product summary lines in stage cards   */
  --ui-text-muted:   #7a7a8a; /* italic self-location lines             */
  --ui-text-faint:   #8a8a9a; /* card sublabels, footer descriptor      */
  --ui-text-fainter: #9a9aa8; /* "Start over"                           */
  --ui-text-ghost:   #b0b0bd; /* copyright                              */
  --ui-nav-link:     #55556a; /* inactive nav items                     */

  /* ---- Borders & surfaces ---- */
  --ui-border:        #e7e7ef; /* card borders                          */
  --ui-border-soft:   #ececf1; /* header + footer hairlines             */
  --ui-divider:       #ededf2; /* in-card dividers                      */
  --ui-border-lilac:  #e2dcec; /* diagnostic dot track, reserved chip    */
  --ui-border-menu:   #e4e4ec; /* services dropdown border              */
  --ui-progress-track:#eceaf2; /* progress bar trough                   */

  /* ---- Reserved-slot styling (Insights / testimonial) ---- */
  --ui-reserved-border: #d6cfe4;
  --ui-reserved-label:  #b0a8c2;

  /* ---- Elevation used by the design output ---- */
  --ui-shadow-menu:      0 12px 34px rgba(26, 26, 46, 0.12);
  --ui-shadow-diagnostic:0 24px 60px rgba(26, 26, 46, 0.28);

  /* ---- Sticky nav backdrop ---- */
  --ui-nav-bg: rgba(255, 255, 255, 0.94);

  /* ---- On-purple text (close section, diagnostic heading) ---- */
  --ui-on-purple-soft: rgba(255, 255, 255, 0.82);

  /* ---- CTA accent -------------------------------------------------------
     The design output exposed accent as an editor prop and wrote
     var(--cta, var(--tml-terracotta)) everywhere, with JS swapping --cta
     between terracotta and purple. There is no editor on a static site and
     the accent system is locked, so it resolves to terracotta, once, here.
     Terracotta is the spotlight (action/emphasis); purple is structure. */
  --cta: var(--tml-terracotta);
}