/* ============================================================
   LIFE SUPPORT SERVICES — WEBFONTS
   Display : Open Sans (broad weight range, used for headings)
   Text/UI : Open Sans (humanist, legible at small sizes)
   Mono    : none — MONO_TO_SANS_2026-08-15, --font-mono now aliases Open Sans
             (Andrew asked to drop the monospace face across the whole site).

   NOTE: Loaded from Google Fonts CDN. Picked at admin request to
   match the public lifesupportservices.ca site.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap");
/* ============================================================
   LIFE SUPPORT SERVICES — COLOR TOKENS
   Brand: deep navy (#232160) + emergency orange (#ef6a2e)
   Signature: navy → plum → orange gradient (from the logo streak)
   ============================================================ */
:root {
  /* -- Brand Navy (primary) ------------------------------- */
  --lss-navy-950: #100e2e;
  --lss-navy-900: #14123a;
  --lss-navy-800: #1a1847;
  --lss-navy-700: #232160; /* PRIMARY brand navy */
  --lss-navy-600: #312e7a;
  --lss-navy-500: #423f96;
  --lss-navy-400: #5d5ab0;
  --lss-navy-300: #8b89c9;
  --lss-navy-200: #c1c0e2;
  --lss-navy-100: #e6e6f3;
  --lss-navy-50:  #f3f3fa;

  /* -- Emergency Orange (accent / action) ----------------- */
  --lss-orange-900: #8f3210;
  --lss-orange-800: #ad3f15;
  --lss-orange-700: #c64d18;
  --lss-orange-600: #db5a23;
  --lss-orange-500: #ef6a2e; /* ACCENT brand orange */
  --lss-orange-400: #f4854f;
  --lss-orange-300: #f8a982;
  --lss-orange-200: #fbceb6;
  --lss-orange-100: #fde7da;
  --lss-orange-50:  #fef4ee;

  /* -- Plum (gradient mid / supporting) ------------------- */
  --lss-plum-700: #4a2a4d;
  --lss-plum-600: #653551;
  --lss-plum-500: #7d3d51;
  --lss-plum-400: #9c4a4a;

  /* -- Neutral Ink / Slate (cool, tuned to navy) ---------- */
  --lss-ink-950: #0f1015;
  --lss-ink-900: #16161d;
  --lss-ink-800: #22232c;
  --lss-ink-700: #33353f;
  --lss-ink-600: #4c4f5a;
  --lss-ink-500: #6b6e7a;
  --lss-ink-400: #9195a1;
  --lss-ink-300: #c2c5cd;
  --lss-ink-200: #e1e3e8;
  --lss-ink-100: #eef0f3;
  --lss-ink-50:  #f7f8fa;
  --lss-white:   #ffffff;

  /* -- Semantic status (EMS-meaningful) ------------------- */
  --lss-emergency: #d22b2b; /* code / danger / emergency red */
  --lss-emergency-bg: #fbeaea;
  --lss-success: #2f8f4e;   /* certified / pass / green seal  */
  --lss-success-bg: #e7f4ec;
  --lss-warning: #e0930f;   /* expiring / caution / amber     */
  --lss-warning-bg: #fcf2dd;
  --lss-info: #2b6cb0;      /* star-of-life blue / info        */
  --lss-info-bg: #e7f0f8;

  /* -- Signature gradients -------------------------------- */
  --lss-gradient-brand: linear-gradient(90deg, #232160 0%, #563056 34%, #b1523d 62%, #ef6a2e 100%); /* @kind color */
  --lss-gradient-brand-diag: linear-gradient(125deg, #2c357f 0%, #232160 54%, #191742 100%); /* @kind color */
  --lss-gradient-navy: linear-gradient(160deg, #2a2770 0%, #1a1847 100%); /* @kind color */
  --lss-gradient-orange: linear-gradient(160deg, #f4854f 0%, #db5a23 100%); /* @kind color */

  /* ====================================================== */
  /* SEMANTIC ALIASES — reference these in components       */
  /* ====================================================== */

  /* surfaces */
  --color-bg: var(--lss-ink-50);
  --color-bg-sunken: var(--lss-ink-100);
  --surface-card: var(--lss-white);
  --surface-raised: var(--lss-white);
  --surface-navy: var(--lss-navy-700);
  --surface-navy-deep: var(--lss-navy-900);

  /* text */
  --text-strong: var(--lss-ink-900);
  --text-body: var(--lss-ink-700);
  --text-muted: var(--lss-ink-500);
  /* TEXT_FAINT_CONTRAST_2026-09-15 — was var(--lss-ink-400) (#9195a1), which
     measures 2.99:1 on white and 2.82:1 on a #f7f8fa panel. AA wants 4.5 for
     text at these sizes, and this token is used 558 times.

     There is no value that both clears 4.5 and stays visibly lighter than
     --text-muted: #747886 still fails on panels at 4.14, and #6f727e passes at
     4.51 but sits 4/255 per channel from --text-muted #6b6e7a. A third,
     lighter text tier that passes AA on a near-white background does not
     exist, so it collapses onto ink-500 rather than pretending otherwise.

     The token stays because it records intent at 558 call sites, and because
     the constraint is specific to LIGHT backgrounds — on a dark theme a
     lighter grey clears 4.5 easily and this is the token that would diverge
     again.

     Placeholders use this and are unaffected in the way that matters: a typed
     value is --text-body at 12.20:1, so filled still reads differently from
     empty. */
  --text-faint: var(--lss-ink-500);
  --text-inverse: var(--lss-white);
  --text-on-navy: #d6d5ec;
  --text-accent: var(--lss-orange-600);
  --text-link: var(--lss-navy-600);
  /* 2026-07-18 (LINK_HOVER_STYLE_2026-07-17.md): hover state for anchors is
     now a color darken + subtle bg tint rather than text-decoration:underline
     (site-wide preference). --text-link-hover pushes the link one shade
     deeper for reinforced affordance; --hover-surface is the neutral wash
     applied to button/card-style anchors via [class*="btn"] / [class*="__item"]
     / [class*="__link"] hover selectors below. Body-text inline anchors get
     the color change only (no bg block that would look wrong mid-sentence). */
  --text-link-hover: var(--lss-navy-800, #191742);
  --hover-surface: rgba(15, 20, 45, 0.045);

  /* brand */
  --brand-primary: var(--lss-navy-700);
  --brand-accent: var(--lss-orange-500);

  /* action (orange = primary CTA) */
  --action: var(--lss-orange-500);
  --action-hover: var(--lss-orange-600);
  --action-active: var(--lss-orange-700);
  --action-text: var(--lss-white);

  /* action (navy = secondary / utility) */
  --action-navy: var(--lss-navy-700);
  --action-navy-hover: var(--lss-navy-600);
  --action-navy-active: var(--lss-navy-800);

  /* borders */
  --border-subtle: var(--lss-ink-200);
  --border-default: var(--lss-ink-300);
  --border-strong: var(--lss-ink-400);
  --border-navy: var(--lss-navy-700);

  /* focus */
  --focus-ring: var(--lss-orange-400);
  --focus-ring-navy: var(--lss-navy-400);
}
/* ============================================================
   LIFE SUPPORT SERVICES — TYPOGRAPHY TOKENS
   ============================================================ */
:root {
  /* families */
  --font-display: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* MONO_TO_SANS_2026-08-15 — Andrew asked to drop the monospace face site-wide
     and use Open Sans everywhere. --font-mono is now aliased to --font-sans so
     every `var(--font-mono)` call (course codes, cert IDs, timestamps, IPs,
     the Security Center columns, …) renders in Open Sans without touching each
     call site. Kept as an alias rather than deleted so nothing referencing it
     breaks. IBM Plex Mono is also dropped from the Google Fonts import above. */
  --font-mono:    var(--font-sans);
  /* ADMIN_FONT_PICKER_2026-07-19 — new-name aliases so CSS added after this
     date can use --font-body / --font-heading directly. The admin picker in
     Branding overrides all four (sans+body, display+heading) via an inline
     @media screen :root block emitted from includes/branding.php. */
  --font-body:    var(--font-sans);
  --font-heading: var(--font-display);

  /* weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extra: 800; /* @kind font */

  /* type scale (1.25 major-third-ish, tuned) */
  --fs-display-2xl: 76px;
  --fs-display-xl: 60px;
  --fs-display-lg: 48px;
  --fs-display-md: 38px;
  --fs-h1: 32px;
  --fs-h2: 26px;
  --fs-h3: 21px;
  --fs-h4: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-overline: 12px;

  /* line heights */
  --lh-tight: 1.02; /* @kind font */
  --lh-snug: 1.15; /* @kind font */
  --lh-heading: 1.2; /* @kind font */
  --lh-body: 1.55; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* letter spacing */
  --ls-tight: -0.02em; /* @kind font */
  --ls-display: -0.01em; /* @kind font */
  --ls-normal: 0; /* @kind font */
  --ls-wide: 0.04em; /* @kind font */
  --ls-overline: 0.14em; /* @kind font */ /* uppercase eyebrows / labels */
  --ls-wordmark: 0.02em; /* @kind font */
}
/* ============================================================
   LIFE SUPPORT SERVICES — SPACING, RADIUS, SHADOW, MOTION
   8px base grid. Squared, utilitarian geometry — modest radii.
   ============================================================ */
:root {
  /* spacing — 8px grid (with 2/4 micro steps) */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;

  /* radii — restrained; the brand reads industrial/squared */
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* borders */
  --border-width: 1px;
  --border-width-thick: 2px;
  --border-width-accent: 3px;  /* orange underline accents */

  /* shadows — cool navy-tinted, crisp not fluffy */
  --shadow-xs: 0 1px 2px rgba(20, 18, 58, 0.06);
  --shadow-sm: 0 1px 3px rgba(20, 18, 58, 0.10), 0 1px 2px rgba(20, 18, 58, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 18, 58, 0.10), 0 2px 4px rgba(20, 18, 58, 0.06);
  --shadow-lg: 0 12px 28px rgba(20, 18, 58, 0.14), 0 4px 10px rgba(20, 18, 58, 0.08);
  --shadow-xl: 0 24px 56px rgba(20, 18, 58, 0.20);
  --shadow-focus: 0 0 0 3px rgba(244, 133, 79, 0.45);       /* orange focus halo */
  --shadow-focus-navy: 0 0 0 3px rgba(93, 90, 176, 0.45);

  /* motion — quick, purposeful, no bounce (public-safety tone) */
  --ease-standard: cubic-bezier(0.2, 0, 0.1, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */

  /* layout */
  --container-max: 1200px; /* @kind spacing */
  --container-narrow: 880px; /* @kind spacing */
  --header-height: 76px; /* @kind spacing */
}
/* ============================================================
   LIFE SUPPORT SERVICES — BASE ELEMENT STYLES
   Applied defaults so specimen cards & kits inherit the brand.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* Reserve the document scrollbar gutter at all times so navigating between
   short (no scrollbar) and tall (scrollbar) pages doesn't shift the whole
   layout sideways by the scrollbar width. Ignored by browsers without
   scrollbar-gutter support, which keep the prior behaviour. */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-body);
  background: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--lh-heading);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-display);
}

p { margin: 0; }

a { color: var(--text-link); text-decoration: none;
    transition: color .12s ease, background-color .12s ease; }
/* Site-wide anchor hover — color change on inline links (WCAG 1.4.1
   preserved by the color-contrast delta between --text-link and
   --text-link-hover), NOT text-decoration:underline. Buttons and
   card-style anchors below layer a subtle background wash so the
   affordance reads as a tappable surface, not underlined text. */
a:hover { color: var(--text-link-hover); }
/* Button-styled / card-styled / tile-styled anchors: bg-color hover
   instead of any inherited underline. Matches lss-btn family,
   BEM __item / __link / __cta / __row leaf classes on interactive
   anchors, and any role="button" anchor. Explicit text-decoration:none
   prevents any residual browser-default underline from returning. Each
   component class is free to override background-color in its own
   :hover rule (see .staff-next__item, .lss-btn, .pkpi, etc.); this rule
   is the site-wide FLOOR. */
a[class*="lss-btn"]:hover,
a[class*="__item"]:hover,
a[class*="__link"]:hover,
a[class*="__cta"]:hover,
a[class*="__row"]:hover,
a[class*="__tile"]:hover,
a[class*="__card"]:hover,
a[role="button"]:hover,
button:hover {
  text-decoration: none;
}
/* Cardish anchors that don't already carry a per-component :hover
   background rule pick up the neutral wash. Component-scoped :hover
   rules load AFTER tokens.css and override cleanly (e.g. .lss-btn
   variants, .pkpi's accent border-color, etc.). */
a[class*="__item"]:hover,
a[class*="__row"]:hover,
a[class*="__tile"]:hover,
a[class*="__card"]:hover {
  background-color: var(--hover-surface);
}

/* Reusable text utilities ---------------------------------- */
/* @dead audit-2026-07-17 — .lss-eyebrow, .lss-display, .lss-mono,
   .lss-rule-accent all have zero runtime references (checked across
   .php/.js/.html). tokens.css :root custom-property block above is still
   pulling its weight; only these four utility classes are orphaned.
   Kept commented pending 30-day soak.
.lss-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-accent);
}
.lss-display {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}
.lss-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.lss-rule-accent {
  height: var(--border-width-accent);
  width: 48px;
  background: var(--lss-orange-500);
  border: 0;
}
*/