/* PM Box design tokens — the reference portal's design language (the reference portal: templates/index.html
   :root, "Base", "Sidebar (white, red accent)", "Topbar (frosted light)", "Page head" and static/home.css), applied to
   the variable names every PM Box surface already reads. One file: the shell, the renderer, the component kit and
   every custom page.
   The language: a white sidebar on a light grey ground, one accent (RA red), charcoal for "selected", Lato
   everywhere, 16 / 11 px radii, hairline strokes and soft shadows, state as colour plus a word. To re-accent the
   whole product (HI blue, say) change --accent, --accent-d, --accent-soft and --accent-grad only. */
:root{
  /* ---- the accent: RA red ---- */
  --red:#FD1D1D; --red-pure:#FD0024; --red-acc:#EB1414; --red-deep:#CF1212; --light-red:#FFF0F0;
  --red-grad:linear-gradient(135deg,#FD1D1D 0%,#EB1414 100%); --red-soft-grad:linear-gradient(180deg,#FFF6F6 0%,#FFFFFF 70%);
  --accent:var(--red-acc); --accent-d:var(--red-deep); --accent-soft:var(--light-red); --accent-grad:var(--red-grad);
  --primary:var(--accent); --primary-hover:var(--accent-d); --blue:var(--accent);
  /* the module hue the identity layer sets per screen; at rest it is the accent */
  --mod:var(--accent); --mod-2:var(--red); --mod-ink:var(--red-deep); --mod-deep:#161718; --mod-soft:var(--light-red);
  --mod-tile:linear-gradient(135deg,#2A2C31,#161718);
  /* charcoal: what "selected", "completed" and the primary dark read as (replaces the old navy) */
  --black:#161718; --charcoal:#161718; --charcoal-2:#2A2C31; --charcoal-grad:linear-gradient(135deg,#2A2C31,#161718);
  --navy:#161718; --navy-700:#2A2C31; --navy-100:#F1F1F2; --navy-50:#F7F7F8;
  --tonal:#F0F5FD; --tonal-ink:#070916; --light-purple:#ECF0FE; --light-blue:#F0F5FD; --light-blue-2:#E6F0FB; --light-blue-bd:#DCE8F8;
  /* ---- neutrals ---- */
  --white:#FFFFFF; --bg:#F5F5F5; --panel:#fff; --surface:#fff; --surface-2:#FAFAFA;
  --stroke:#E4E6E7; --line:#E4E6E7; --line-soft:#F1F1F2; --stroke-2:#D4D6DA;
  --ink:#070916; --ink-2:#4F5158; --ink-soft:#4F5158; --ink-3:#65696c; --ink-faint:#65696c; --grey:#4F5158; --grey-2:#65696c;
  --n-0:#fff; --n-25:#FAFAFA; --n-50:#F5F5F5; --n-100:#F1F1F2; --n-200:#E4E6E7; --n-300:#D4D6DA; --n-400:#B4B6BC;
  --n-500:#94969E; --n-600:#4F5158; --n-700:#3A3C42; --n-900:#070916;
  /* ---- state families: colour plus a word, never colour alone (the RA Home palette) ---- */
  --ok:#0f7a3c; --ok-bg:#E8F6ED; --ok-bd:#CDEBD8; --green:#0f7a3c;
  --warn:#B45309; --warn-bg:#FFF3E2; --warn-bd:#FADFB8; --amber:#D97706;
  --bad:#EB1414; --bad-bg:#FFF0F0; --bad-bd:#F6D6D6;
  --info:#0E7490; --info-bg:#E2F3F7; --info-bd:#C3E3EB; --violet:#7C3AED; --teal:#0E7490;
  /* severity / tier ladder (grey → teal → charcoal → violet → red) */
  --tier-1:#94969E; --tier-2:#0E7490; --tier-3:#161718; --tier-4:#7C3AED; --tier-5:#EB1414;
  --health-green:#15944A; --health-amber:#D97706; --health-red:#EB1414; --health-grey:#94969E;
  /* ---- type: Lato, tabular figures ---- */
  --font:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-display:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --sans:var(--font); --display:var(--font-display);
  --t-micro:11px; --t-meta:12px; --t-body:13.5px; --t-strong:14px; --t-section:16px; --t-title:21px; --t-display:30px;
  --fs-xs:11px; --fs-sm:12px; --fs-base:14px; --fs-md:16px; --fs-title:21px;
  /* ---- space: a 4px baseline ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:48px;
  /* ---- shape: RA's 16 / 11 plus the small and the pill ---- */
  --r-sm:8px; --r:11px; --r-lg:16px; --r-full:999px; --radius:16px; --radius-sm:11px;
  /* ---- elevation: RA's soft, low shadows ---- */
  --shadow-sm:0 1px 2px rgba(7,9,22,.04),0 1px 1px rgba(7,9,22,.03);
  --shadow-md:0 4px 16px -6px rgba(7,9,22,.10),0 2px 6px -4px rgba(7,9,22,.06);
  --shadow-lg:0 18px 50px -22px rgba(7,9,22,.22);
  --e1:var(--shadow-sm); --e2:var(--shadow-md); --e3:var(--shadow-lg);
  --hover-shadow:0 1px 2px rgba(7,9,22,.05),0 12px 24px -18px rgba(7,9,22,.28); --menu-shadow:var(--shadow-lg);
  --ring:0 0 0 3px rgba(253,0,36,.18);
  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.7,.3,1); --fast:120ms; --med:180ms;
}