/* =============================================================================
   PeoplePulse design tokens — THE SINGLE SOURCE OF TRUTH
   =============================================================================

   Every colour, font, radius, shadow and layout constant in the product is
   defined here once. Change a value in this file and it changes everywhere:
   the Angular public site, the Razor admin panel and the Razor fallback site.

   HOW EACH SURFACE GETS IT
     Razor  — `_Layout.cshtml` and `_AdminLayout.cshtml` link this file BEFORE
              their own stylesheet, so their rules can consume the variables.
     Angular — `web/angular.json` lists this exact file in the `styles` array,
              so the same physical file is bundled into the app.

   RULES
     1. Do NOT redeclare any of these in styles.css, admin.css or styles.scss.
        A second `:root` block is how the three files drifted apart before:
        nine of twenty-four shared tokens had different values within a day of
        each other, so the "same" product rendered two different greys.
     2. Component files consume `var(--token)`. No raw hex, no magic radii.
     3. Adding a token means adding it here, not near where it is first used.
   ============================================================================= */

:root {
  /* ---------- Brand ---------- */
  --blue: #003090;              /* primary. Buttons, links, active states. */
  --blue-700: #00256f;          /* hover/pressed */
  --blue-50: #eef2fb;           /* tints, icon grounds */

  --red: #ea1d24;              /* ACCENT ONLY: destructive actions, alerts, thin marks.
                                   Never a large filled surface, never a primary button. */
  --red-600: #cf161d;          /* red text on white — the lighter red fails AA at body size */

  --yellow: #ffcc00;           /* retired from the public site. Admin status pills at most. */
  --yellow-soft: #fff4cc;

  /* ---------- Ink and surfaces ---------- */
  --ink: #0e1a33;              /* body text — 17.3:1 on white */
  --slate: #5b6b86;            /* secondary text — 5.4:1, the lightest that still passes AA */
  --muted: #8794a8;            /* 3.07:1. DECORATIVE ONLY — never readable text. */
  --bg: #ffffff;
  --bg-soft: #f7f9fc;          /* section banding */
  --line: #dde3ed;             /* 1.29:1. Decorative rules only. */
  --field-border: #8794a8;     /* 3:1. Form controls need a border that carries meaning:
                                   WCAG 1.4.11, since shadows no longer identify an input. */
  --white: #ffffff;

  /* ---------- Status ---------- */
  --ok: #157347;               /* 5.25:1. The old #1f9d63 was 3.10:1 and failed AA. */
  --ok-bg: #e6f6ee;
  --warn: #8a5d00;             /* was #c98a00 at ~3.6:1, below AA for text. Darkened on the way in. */
  --warn-bg: #fff3d6;

  /* ---------- Shape ----------
     Small radii are what make the product read as serious rather than consumer. */
  --radius: 4px;
  --radius-lg: 6px;
  --radius-pill: 2px;          /* nothing should read as a pill */

  /* ---------- Depth ----------
     Definition comes from hairline borders; shadows are a last resort. */
  --shadow-sm: 0 1px 2px rgba(14, 26, 51, .05);
  --shadow: 0 2px 8px rgba(14, 26, 51, .06);
  --shadow-lg: 0 8px 24px rgba(14, 26, 51, .10);

  /* ---------- Type ----------
     Self-hosting these is still open: they load from Google's CDN today, which
     sends every visitor's IP to a US processor and makes the build need network. */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --tracking-tight: -.02em;    /* headings */
  --tracking-h1: -.025em;

  /* ---------- Layout ---------- */
  --maxw: 1180px;
  --header-h: 76px;
}