/*
 * TPN+ Design System tokens.
 *
 * The design handoff referenced these as CSS custom properties from a bound
 * `_ds/` bundle that was not shipped with it. Values marked (handoff) are
 * stated literally in the handoff; values marked (derived) were chosen here to
 * complete the scale and satisfy the handoff's stated contrast rules. If the
 * real design-system bundle turns up, reconcile the derived ones against it.
 */

:root {
  /* Brand ------------------------------------------------------------- */
  --navy-900: #14213a; /* (handoff) hero and deepest surfaces */
  --navy-800: #1c2a42; /* (handoff) brand navy */
  --navy-700: #2a3b58; /* (derived) between navy-800 and navy-500;
                                     the handoff asks for it behind the blog
                                     byline initials */
  --navy-500: #40567f; /* (derived) mid navy, muted navy text */

  --gold-500: #d4af37; /* (handoff) gold accent */
  --fixit-yellow: #ffe400; /* (campaign) Fix It or Risk It, not a TPN colour.
                                     The campaign's own value, which is what the
                                     mark is drawn in - histogramming
                                     fixit-or-risk-it.png puts 36% of its opaque
                                     pixels on this exact yellow and its ink on
                                     #231f20. The #f6de1e here before was close
                                     but not it, dE76 5.9, enough that the
                                     logo's plaque showed as a brighter patch
                                     wherever the mark sat on a yellow fill. */
  --gold-600: #c9a227; /* (handoff) gold, deeper */
  --gold-700: #ae8c1f; /* (derived) Gold tier dot */
  --gold-900: #8b6b00; /* (derived) gold text on light surfaces. 5.01:1 on
                                     white, so it clears AA at the 11px this
                                     is mostly used at. Was #6e570f at 6.92:1,
                                     which had margin to spare and spent it in
                                     the wrong place: at 76% saturation it
                                     read brown rather than gold. Full
                                     saturation at hue 46, dropped to the
                                     lightness that still holds 5:1. */
  --gold-gradient: linear-gradient(
    90deg,
    #b8860b 0%,
    #d4af37 25%,
    #f2de8b 50%,
    #d4af37 75%,
    #b8860b 100%
  ); /* (derived) metallic card top caps */

  /* Action ------------------------------------------------------------ */
  --primary: #1976d2; /* (handoff) every interactive primary */
  --primary-hover: #1565c0; /* (handoff) hover */

  /* Neutral ----------------------------------------------------------- */
  --grey-50: #fafbfd; /* (derived) faintest cool canvas */
  --grey-100: #f3f5fb; /* (handoff) pale cool canvas */
  --grey-200: #e4e7ef; /* (derived) badge panels, neutral chips */
  --grey-500: #8c8c8c; /* (handoff) NON-TEXT ONLY - fails 4.5:1 */
  --grey-600: #6e6e6e; /* (derived) 5.1:1 on white */
  --grey-900: #2b2f36; /* (derived) footer ground. Chosen by measuring
                                     the tightest thing standing on it: the
                                     origin line is 50% white at 13px and needs
                                     4.5:1, which it clears at 4.59:1 here and
                                     fails at 4.29:1 one step lighter. */

  /* Text -------------------------------------------------------------- */
  --text-heading: #1c2a42; /* (derived) = navy-800, 12.6:1 on white */
  --text-body: #2e3238; /* (derived) 12.2:1 on white */
  --text-secondary: #545b66; /* (derived) 7.3:1 on white */
  --text-muted: #6e6e6e; /* (derived) 5.10:1 on white, 4.68:1 on
                                     --grey-100. The handoff's #717171 passes
                                     on white (4.88:1) but drops to 4.48:1 on
                                     the pale canvas, where most muted labels
                                     and breadcrumbs actually sit. */
  --text-link: #1565c0; /* (derived) 5.4:1 on white */

  /* Borders ----------------------------------------------------------- */
  --border-subtle: rgba(0, 0, 0, 0.08); /* (handoff) hairlines */
  --border-default: rgba(0, 0, 0, 0.16); /* (handoff) card borders */
  --border-strong: rgba(0, 0, 0, 0.42); /* (handoff) control borders, 3:1 */

  /* Status and categorical -------------------------------------------- */
  --chip-service: #1976d2; /* service chips, TPN blue. The handoff set
                                     these olive (#55762B); changed on request.
                                     4.60:1 with white text - passes AA. */
  --logo-dark: #222222; /* (handoff) field the reversed member marks
                                     were trimmed against; they are invisible
                                     on white, so the panel must use this */
  --badge-blue: #4a7fb5; /* (derived) Blue tier dot */
  --badge-silver: #a8afb8; /* (derived) Silver tier dot */
  --teal: #006d77; /* (handoff) */
  --orange: #be541c; /* (derived) the fourth categorical fill, alongside
                                     --primary, --sam and --teal. Sits between
                                     --gold-600 and --error in hue. 4.69:1 with
                                     white text; two steps lighter (#c2571e)
                                     reads the same and measures 4.49:1, so it
                                     is set here at the first value that clears
                                     AA as a solid fill. */
  --sam: #ab4289; /* (supplied) the third categorical fill, alongside
                                     --primary and --fixit-yellow. 5.42:1 with
                                     white text. Named for the persona it came
                                     in on, not for the hue. Also the color of
                                     every Get Started action on the site. */
  --sam-hover: #933976; /* (derived) --sam darkened, the same step
                                     --primary-hover takes from --primary */
  --error: #c62828; /* (derived) PDF icons, 5.9:1 on white */

  /* Type -------------------------------------------------------------- */
  --font-ui: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: Montserrat, Roboto, system-ui, sans-serif;

  /* Motion ------------------------------------------------------------ */
  --ease-slide: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-micro: 195ms;
  --dur-fade: 260ms;
  --dur-slide: 700ms;

  /* Layout ------------------------------------------------------------ */
  --page-max: 1240px;

  /*
   * Two text measures, and only two. Copy either uses one of these or it fills
   * its column; there is no third width.
   *
   * --measure       long-form prose read line after line: article bodies,
   *                 legal text. A reading measure genuinely helps here.
   * --measure-hero  the lede under a page title, which sits in a hero column
   *                 next to a slab or a diagonal and cannot run the full page.
   *
   * Section sub-text gets neither: it fills its column, because a paragraph
   * stopping short of the heading and rule above it reads as a broken line.
   *
   * These replaced five hand-picked values (820px, 840px, 46em, 62em, 874px)
   * that all meant "a reading measure" and disagreed with each other, so every
   * band wrapped somewhere different and each one had to be found by eye.
   * tools/check.mjs check 16 fails the build if a sixth appears.
   */
  --measure: 820px;
  --measure-hero: 880px;
  --radius: 4px;
  --radius-pill: 20px;

  /* Page accent ------------------------------------------------------- */
  /* One pair per page theme. The base paints the header panel, primary
     buttons, icons and the rules under headings; the hover is the base at 85%
     of each channel and also serves as the link color, where the extra
     darkness buys margin over the 4.5:1 body-text threshold.

     Every base measures at least 4.60:1 on white, so white button text and
     accent-on-white text both pass wherever --primary used to. Blue is the
     original --primary/--primary-hover pair unchanged: it is the default
     theme, not a new color. */
  --accent-rust: #b14245;
  --accent-rust-hover: #96383b;
  --accent-bronze: #a85000;
  --accent-bronze-hover: #8f4400;
  --accent-pine: #007f6a;
  --accent-pine-hover: #006c5a;
  --accent-teal: #006d77;
  --accent-teal-hover: #005d65;
  --accent-steel: #00779c;
  --accent-steel-hover: #006585;
  --accent-blue: #1976d2;
  --accent-blue-hover: #1565c0;
  --accent-violet: #7a55b3;
  --accent-violet-hover: #684898;
  --accent-orchid: #ab4289;
  --accent-orchid-hover: #913874;

  /* Elevation --------------------------------------------------------- */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 2px 12px rgba(0, 0, 0, 0.12);
  --shadow-panel: 0 2px 12px rgba(0, 0, 0, 0.25);
  --shadow-avatar: 0 2px 6px rgba(0, 0, 0, 0.1);
}