/*
  Design tokens, lifted verbatim from the :root block of design/prototype.html, as docs/README.md
  and doc 13 specify: the prototype, this back office and the React Native ui package take colour,
  type and spacing from one source. Change a token there first, then here.

  Fonts: the stacks name IBM Plex first and fall back to the system UI fonts. The back office does
  not load them from a third-party CDN - its Content-Security-Policy allows only its own origin - so
  until the font files are self-hosted, the system fallbacks are what render.
*/
:root{
  --ground:#F7F6F3; --surface:#FFFFFF; --surface-2:#FBFAF8; --surface-3:#F1EFEA;
  --ink:#1A1D26; --ink-2:#454B5C; --muted:#6B7183;
  --line:#E4E1DA; --line-strong:#CFCBC2;
  --accent:#2B4C7E; --accent-ink:#FFFFFF; --accent-soft:#E8EEF6; --accent-line:#B9CCE4;
  --gold:#8A6A1F; --gold-soft:#F5EEDC; --gold-line:#DFCC9E;
  --good:#1F6B4A; --good-soft:#E3F0EA;
  --warn:#8A5D00; --warn-soft:#FAF0DA;
  --crit:#A32B28; --crit-soft:#F9E7E6;
  --shadow:0 1px 2px rgba(26,29,38,.07),0 6px 16px rgba(26,29,38,.05);
  --sb-bg:#1E2B3F; --sb-ink:#E7EBF2; --sb-ink-2:#A6B3C6; --sb-label:#909DB4;
  --sb-line:#2D3C53; --sb-hover:#273650; --sb-on-bg:#324864; --sb-on-ink:#FFFFFF;
  --sb-gold:#D9B75F; --sb-mark-bg:#C9A227; --sb-mark-ink:#1E2B3F; --sb-pip:#C8403A;
  /* module hues — solid for hero tiles, soft for everything else */
  --h-blue:#2B5F9E;   --h-blue-s:#E7EEF7;
  --h-green:#1E7A55;  --h-green-s:#E2F1EA;
  --h-amber:#9A6405;  --h-amber-s:#FAEEDA;
  --h-purple:#6A4AA8; --h-purple-s:#EDE8F8;
  --h-teal:#0F757D;   --h-teal-s:#DFF0F1;
  --h-rose:#B33A5B;   --h-rose-s:#FAE6EB;
  --h-gold:#8A6A1F;   --h-gold-s:#F5EEDC;
  --h-indigo:#4553B8; --h-indigo-s:#E9EBF9;
  --sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --serif:"IBM Plex Serif",ui-serif,Georgia,"Times New Roman",serif;
  --r:7px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --ground:#12141A; --surface:#191C24; --surface-2:#1E212A; --surface-3:#242835;
  --ink:#E9E8E4; --ink-2:#BEC2CE; --muted:#8A90A1;
  --line:#2A2F3B; --line-strong:#3C4252;
  --accent:#8FB3E0; --accent-ink:#12141A; --accent-soft:#1D2937; --accent-line:#33445C;
  --gold:#D4AF37; --gold-soft:#2A2415; --gold-line:#4A3F1E;
  --good:#5FBF95; --good-soft:#15271E;
  --warn:#D9A441; --warn-soft:#2A2312;
  --crit:#E58A85; --crit-soft:#2E1917;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#12141A; --surface:#191C24; --surface-2:#1E212A; --surface-3:#242835;
  --ink:#E9E8E4; --ink-2:#BEC2CE; --muted:#8A90A1;
  --line:#2A2F3B; --line-strong:#3C4252;
  --accent:#8FB3E0; --accent-ink:#12141A; --accent-soft:#1D2937; --accent-line:#33445C;
  --gold:#D4AF37; --gold-soft:#2A2415; --gold-line:#4A3F1E;
  --good:#5FBF95; --good-soft:#15271E;
  --warn:#D9A441; --warn-soft:#2A2312;
  --crit:#E58A85; --crit-soft:#2E1917;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.3);
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --h-blue:#4F87CC;   --h-blue-s:#1A2634;
  --h-green:#3FA47A;  --h-green-s:#152720;
  --h-amber:#C08A2A;  --h-amber-s:#2A2214;
  --h-purple:#9277D0; --h-purple-s:#221D33;
  --h-teal:#3AA0A8;   --h-teal-s:#12262A;
  --h-rose:#D4708C;   --h-rose-s:#2C1A20;
  --h-gold:#D4AF37;   --h-gold-s:#2A2415;
  --h-indigo:#7C89DF; --h-indigo-s:#1C2038;
}}
:root[data-theme="dark"]{
  --h-blue:#4F87CC;   --h-blue-s:#1A2634;
  --h-green:#3FA47A;  --h-green-s:#152720;
  --h-amber:#C08A2A;  --h-amber-s:#2A2214;
  --h-purple:#9277D0; --h-purple-s:#221D33;
  --h-teal:#3AA0A8;   --h-teal-s:#12262A;
  --h-rose:#D4708C;   --h-rose-s:#2C1A20;
  --h-gold:#D4AF37;   --h-gold-s:#2A2415;
  --h-indigo:#7C89DF; --h-indigo-s:#1C2038;
}

/* ---------- sidebar variants ----------
   Chrome keeps its identity in both page themes, so a navy sidebar stays navy
   in dark mode. "Paper" is the exception: it maps onto the page tokens and
   follows the theme. Declared after the dark blocks so they win on equal
   specificity; :root above carries Ink Navy as the no-JS default.           */
:root[data-sb="navy"]{
  --sb-bg:#1E2B3F; --sb-ink:#E7EBF2; --sb-ink-2:#A6B3C6; --sb-label:#909DB4;
  --sb-line:#2D3C53; --sb-hover:#273650; --sb-on-bg:#324864; --sb-on-ink:#FFFFFF;
  --sb-gold:#D9B75F; --sb-mark-bg:#C9A227; --sb-mark-ink:#1E2B3F; --sb-pip:#C8403A;
}
:root[data-sb="graphite"]{
  --sb-bg:#21201D; --sb-ink:#EDEBE6; --sb-ink-2:#ADA9A0; --sb-label:#8F8B82;
  --sb-line:#312F2B; --sb-hover:#2B2926; --sb-on-bg:#3A3833; --sb-on-ink:#FFFFFF;
  --sb-gold:#D9B75F; --sb-mark-bg:#C9A227; --sb-mark-ink:#21201D; --sb-pip:#C8403A;
}
:root[data-sb="brass"]{
  --sb-bg:#4A3A12; --sb-ink:#F7F1E1; --sb-ink-2:#D3C398; --sb-label:#BBAA83;
  --sb-line:#5C4A1E; --sb-hover:#57451A; --sb-on-bg:#6B5623; --sb-on-ink:#FFFFFF;
  --sb-gold:#FFE9A8; --sb-mark-bg:#F0D68A; --sb-mark-ink:#4A3A12; --sb-pip:#D4544C;
}
:root[data-sb="teal"]{
  --sb-bg:#16332E; --sb-ink:#E4EFEB; --sb-ink-2:#9FBAB2; --sb-label:#84A198;
  --sb-line:#22443D; --sb-hover:#1E3E37; --sb-on-bg:#2A5349; --sb-on-ink:#FFFFFF;
  --sb-gold:#D9B75F; --sb-mark-bg:#C9A227; --sb-mark-ink:#16332E; --sb-pip:#C8403A;
}
:root[data-sb="paper"]{
  --sb-bg:var(--surface); --sb-ink:var(--ink); --sb-ink-2:var(--ink-2); --sb-label:var(--muted);
  --sb-line:var(--line); --sb-hover:var(--surface-3); --sb-on-bg:var(--accent-soft); --sb-on-ink:var(--accent);
  --sb-gold:var(--gold); --sb-mark-bg:var(--accent); --sb-mark-ink:var(--accent-ink); --sb-pip:var(--crit);
}
:root[data-sb="paper"] .sidebar{color-scheme:normal}

/* ---------- accent palettes ----------
   The tenant theme's accent (doc 04 §4.4), applied as data-accent on <html> from the
   TenantBranding row. Links, focus rings, primary buttons and the selected tab take it.

   The status colours deliberately do not: --good, --warn and --crit mean passed, waiting
   and refused on every screen of every tenant, and a tenant able to recolour them would
   be one whose staff learn a different meaning for red.

   Light values are dark enough to carry white text and to read as text on --surface; the
   dark ones are lightened and carry dark ink, as the base dark block already does for
   Navy. Declared after the dark blocks above and with equal specificity, so each pair has
   to be written out rather than inherited - a light-only accent would otherwise win in
   dark mode and put #2B4C7E links on a #191C24 surface.                                  */
:root[data-accent="navy"]{
  --accent:#2B4C7E; --accent-ink:#FFFFFF; --accent-soft:#E8EEF6; --accent-line:#B9CCE4;
}
:root[data-accent="forest"]{
  --accent:#1E5E42; --accent-ink:#FFFFFF; --accent-soft:#E4EFE9; --accent-line:#B3D2C3;
}
:root[data-accent="brass"]{
  --accent:#7A5A14; --accent-ink:#FFFFFF; --accent-soft:#F5EEDC; --accent-line:#DFCC9E;
}
:root[data-accent="teal"]{
  --accent:#0E5C63; --accent-ink:#FFFFFF; --accent-soft:#DFF0F1; --accent-line:#A9D4D8;
}
:root[data-accent="plum"]{
  --accent:#6A2B55; --accent-ink:#FFFFFF; --accent-soft:#F6E6EF; --accent-line:#DCBBCF;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])[data-accent="navy"]{
    --accent:#8FB3E0; --accent-ink:#12141A; --accent-soft:#1D2937; --accent-line:#33445C;
  }
  :root:not([data-theme="light"])[data-accent="forest"]{
    --accent:#6FC4A0; --accent-ink:#12141A; --accent-soft:#16291F; --accent-line:#2C4A3A;
  }
  :root:not([data-theme="light"])[data-accent="brass"]{
    --accent:#D9B75F; --accent-ink:#12141A; --accent-soft:#2A2415; --accent-line:#4A3F1E;
  }
  :root:not([data-theme="light"])[data-accent="teal"]{
    --accent:#63C3C9; --accent-ink:#12141A; --accent-soft:#12272A; --accent-line:#28464A;
  }
  :root:not([data-theme="light"])[data-accent="plum"]{
    --accent:#D492B8; --accent-ink:#12141A; --accent-soft:#2A1A24; --accent-line:#4A2E3E;
  }
}
:root[data-theme="dark"][data-accent="navy"]{
  --accent:#8FB3E0; --accent-ink:#12141A; --accent-soft:#1D2937; --accent-line:#33445C;
}
:root[data-theme="dark"][data-accent="forest"]{
  --accent:#6FC4A0; --accent-ink:#12141A; --accent-soft:#16291F; --accent-line:#2C4A3A;
}
:root[data-theme="dark"][data-accent="brass"]{
  --accent:#D9B75F; --accent-ink:#12141A; --accent-soft:#2A2415; --accent-line:#4A3F1E;
}
:root[data-theme="dark"][data-accent="teal"]{
  --accent:#63C3C9; --accent-ink:#12141A; --accent-soft:#12272A; --accent-line:#28464A;
}
:root[data-theme="dark"][data-accent="plum"]{
  --accent:#D492B8; --accent-ink:#12141A; --accent-soft:#2A1A24; --accent-line:#4A2E3E;
}