/**
 * @file
 * Design tokens for the JI Bootstrap theme (UI/UX refresh, Phase 1).
 *
 * Custom properties ONLY — no component selectors belong in this file.
 * Loaded before components.css and legacy style.css; see components.css's
 * header comment for the cascade rule.
 *
 * Brand is derived from this app's OWN existing colours (the table-header
 * teal `#00779b` and `.btn-info` teal `#127896` already live in
 * css/style.css), not invented from scratch — both already clear WCAG AA
 * on white (5.11:1 / 5.06:1). Status/neutral ramps are the same
 * AA-verified values used on the sibling `ji_bootstrap` clinical app
 * (labs), which shares this theme's exact baseline (plain Bootstrap 3.4.8,
 * no Bootswatch swatch) — see docs/DATA-DICTIONARY.md and
 * docs/SUBSYSTEMS.md "Frontend / theme" for how this was verified for
 * this repo specifically.
 */

:root {
  /* ---- Neutrals: cool-tinted, reads clinical rather than cozy. ---- */
  --ji-n-0:   #FFFFFF;
  --ji-n-25:  #FBFCFD;
  --ji-n-50:  #F5F7FA;
  --ji-n-100: #EDF1F5;
  --ji-n-200: #DDE3EA;
  --ji-n-300: #C3CCD6;
  --ji-n-400: #97A3B0;
  --ji-n-500: #646F7C; /* muted text — 5.11:1 on white, 4.98:1 on --ji-n-25, 4.76:1 on --ji-n-50 */
  --ji-n-600: #4A5560;
  --ji-n-700: #333C46; /* body text — 11.2:1 on white */
  --ji-n-900: #1A2129;

  /* ---- Brand: this app's existing teal, kept — not reinvented.
     #00779b already used for table headers, #127896 for .btn-info;
     both measured 5.0-5.1:1 on white (AA pass). Deliberately NOT
     green/amber/red — the brand hue must never be confusable with a
     RAG status colour. ---- */
  --ji-p-50:  #E6F4F7;
  --ji-p-100: #C7E7ED;
  --ji-p-500: #0E8CA8; /* decorative/accent only — not verified AA-safe behind white text */
  --ji-p-600: #00779B; /* 5.11:1 on white — this app's existing header/link/primary teal */
  --ji-p-700: #075C77; /* 7.48:1 on white — hover/focus fill */
  --ji-p-900: #04424F; /* 11.07:1 on white — deepest text/icon use */

  /* ---- Status: each foreground passes AA as TEXT both on white AND on its
     matching tinted background (*-bg) — chips render foreground-on-tint,
     so the tint contrast is the one that actually governs chip legibility.
     Values re-verified for this file (2026-08-18), same figures as the
     labs profile that originated this ramp. ---- */
  --ji-ok:      #176F4E; /* 6.14:1 on white, 5.50:1 on --ji-ok-bg */
  --ji-ok-bg:   #E7F6EF;
  --ji-ok-700:  #115940; /* hover/focus fill for .btn-success — 8.31:1 white-on-fill */
  --ji-warn:    #B45309; /* 5.02:1 on white, 4.58:1 on --ji-warn-bg — passes, thin margin */
  --ji-warn-bg: #FEF3E2;
  --ji-warn-700: #8F4207; /* hover/focus fill for .btn-warning — 7.12:1 white-on-fill */
  --ji-bad:     #B42318; /* 6.57:1 on white, 5.75:1 on --ji-bad-bg */
  --ji-bad-bg:  #FDECEA;
  --ji-bad-700: #8F1C13; /* hover/focus fill for .btn-danger — 8.96:1 white-on-fill */
  --ji-none:    #5A6673; /* 5.86:1 on white, 5.16:1 on --ji-none-bg */
  --ji-none-bg: #EDF1F5;
  --ji-info:    #00779B; /* reuses brand — 5.11:1 on white, 4.53:1 on --ji-info-bg */
  --ji-info-bg: #E6F4F7;

  /* ---- Type. System stack: no self-hosted/third-party webfont request
     on the base font. The legacy 'Play' Google Font stays wired for the
     navbar brand text specifically (style.css sets it with higher
     specificity than anything here) — this only changes body/UI text. ---- */
  --ji-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --ji-fs-xs:    11px;
  --ji-fs-sm:    12px;
  --ji-fs-base:  13px;
  --ji-fs-md:    15px;
  --ji-fs-lg:    18px;
  --ji-fs-xl:    22px;
  --ji-fs-2xl:   28px;
  --ji-lh:       1.5;
  --ji-lh-tight: 1.3;

  /* ---- Space (4px base). ---- */
  --ji-s-1:  2px;
  --ji-s-2:  4px;
  --ji-s-3:  6px;
  --ji-s-4:  8px;
  --ji-s-5:  12px;
  --ji-s-6:  16px;
  --ji-s-7:  20px;
  --ji-s-8:  24px;
  --ji-s-9:  32px;
  --ji-s-10: 40px;

  /* ---- Radius. ---- */
  --ji-r-sm:   3px;
  --ji-r-md:   6px;
  --ji-r-lg:   10px;
  --ji-r-pill: 999px;

  /* ---- Elevation: shallow and soft, replacing Bootstrap 3's insets. ---- */
  --ji-sh-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --ji-sh-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .06);
  --ji-sh-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .06);

  /* ---- Focus: a real gap in the current theme. ---- */
  --ji-focus-ring: 0 0 0 3px rgba(0, 119, 155, .28);

  /* ---- Motion. ---- */
  --ji-t: 150ms ease;
}