/*
  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="burgundy"]{
  --sb-bg:#4A1220; --sb-ink:#F7E9EC; --sb-ink-2:#D9B3BC; --sb-label:#C098A2;
  --sb-line:#5E1C2C; --sb-hover:#581829; --sb-on-bg:#6E2337; --sb-on-ink:#FFFFFF;
  --sb-gold:#E8C66A; --sb-mark-bg:#D4AF37; --sb-mark-ink:#4A1220; --sb-pip:#F08A7E;
}
/* KGF's logo red. The only chrome drawn as a gradient (--sb-bg-img, --sb-on-img), and the only one that brings a
   page palette with it: the back office opens dark (BrandingView.DefaultTheme), on a neutral charcoal rather than
   the ledger's blue-black, so the red reads as red. */
:root[data-sb="crimson"]{
  --sb-bg:#56060C; --sb-ink:#FFFFFF; --sb-ink-2:#F3E3E4; --sb-label:#E8C4C7;
  --sb-line:rgba(255,255,255,.14); --sb-hover:rgba(255,255,255,.09); --sb-on-bg:#C80E18; --sb-on-ink:#FFFFFF;
  --sb-gold:#F0C060; --sb-mark-bg:#E3121C; --sb-mark-ink:#FFFFFF; --sb-pip:#FFB0B4;
  --sb-bg-img:linear-gradient(180deg,#7D0A12 0%,#56060C 42%,#2A0306 100%);
  --sb-on-img:linear-gradient(180deg,#E3121C,#A3070F);
  --sb-edge:rgba(255,90,90,.35);
}
@media (prefers-color-scheme:dark){:root[data-sb="crimson"]:not([data-theme="light"]){
  --ground:#111113; --surface:#18181B; --surface-2:#1D1D21; --surface-3:#25252A;
  --ink:#EDEBEA; --ink-2:#C6C1C0; --muted:#97908F;
  --line:#2B2A2F; --line-strong:#3D3B42;
}}
:root[data-sb="crimson"][data-theme="dark"]{
  --ground:#111113; --surface:#18181B; --surface-2:#1D1D21; --surface-3:#25252A;
  --ink:#EDEBEA; --ink-2:#C6C1C0; --muted:#97908F;
  --line:#2B2A2F; --line-strong:#3D3B42;
}

/* Wine red and Signal red: the two lighter reds, for a tenant that finds Burgundy and Crimson too dark. Each is a gradient
   (--sb-bg-img) that never goes below a clearly red, and each lights the lit row as a pale pill (--sb-on-bg) instead of a
   red one, which would vanish on red. They carry no page palette, so the page theme stays the reader's own choice, and
   neither sets --sb-on-img, so the period tabs on the dashboard keep the accent. Measured worst case over the whole
   gradient (4.5 is the floor): Wine ink 8.0, ink-2 6.9, label 5.6, lit row 9.4; Signal ink 5.9, ink-2 5.3, label 4.9, lit
   row 7.2. Change a stop and measure again. */
:root[data-sb="wine"]{
  --sb-bg:#7B1E34; --sb-ink:#FFFFFF; --sb-ink-2:#FBE9EC; --sb-label:#F3CFD6;
  --sb-line:rgba(255,255,255,.18); --sb-hover:rgba(255,255,255,.10); --sb-on-bg:#FFF4F1; --sb-on-ink:#7B1E34;
  --sb-gold:#F0C060; --sb-mark-bg:#E8C66A; --sb-mark-ink:#5E1628; --sb-pip:#FFD0D6;
  --sb-bg-img:linear-gradient(180deg,#9B1D36 0%,#7B1E34 45%,#5E1628 100%);
}
:root[data-sb="signal"]{
  --sb-bg:#B00E17; --sb-ink:#FFFFFF; --sb-ink-2:#FFEDEE; --sb-label:#FFE3E4;
  --sb-line:rgba(255,255,255,.22); --sb-hover:rgba(255,255,255,.12); --sb-on-bg:#FFFFFF; --sb-on-ink:#B00E17;
  --sb-gold:#FFE08A; --sb-mark-bg:#FFFFFF; --sb-mark-ink:#B00E17; --sb-pip:#FFE3E4;
  --sb-bg-img:linear-gradient(180deg,#C8101A 0%,#B00E17 50%,#8F0A13 100%);
}

/* ---------- the stage ----------
   The dark set the sign-in page and Home are drawn on: fixed colours, not the page theme, because they are the
   company's front door rather than a working screen. Lit in the chrome's family: red for the two KGF chromes,
   the ledger's blue for the rest. */
:root{
  --st-ground:#0E1118; --st-wall:#141C2B; --st-wall-2:#1E2B3F; --st-glow:79,135,204; --st-light:#6EA3FF;
  --st-btn:#2B5F9E; --st-btn-2:#1E4677; --st-btn-ink:#FFFFFF;
}
:root[data-sb="crimson"],:root[data-sb="burgundy"],:root[data-sb="wine"],:root[data-sb="signal"]{
  --st-ground:#160204; --st-wall:#2A0406; --st-wall-2:#7A0D15; --st-glow:255,40,50; --st-light:#FF3A3A;
  --st-btn:#FF3030; --st-btn-2:#D00812; --st-btn-ink:#FFFFFF;
}

: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;
}
:root[data-accent="burgundy"]{
  --accent:#7B1E34; --accent-ink:#FFFFFF; --accent-soft:#F8E7EB; --accent-line:#E2B9C3;
}

@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:not([data-theme="light"])[data-accent="burgundy"]{
    --accent:#E89AAA; --accent-ink:#12141A; --accent-soft:#2C171C; --accent-line:#4F2A33;
  }
}
: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;
}
:root[data-theme="dark"][data-accent="burgundy"]{
  --accent:#E89AAA; --accent-ink:#12141A; --accent-soft:#2C171C; --accent-line:#4F2A33;
}