/* Assurance — house style of B-140 (part of B-139: slate, navy, ivory; replaces the navy style of B-089). THE one file with every
   colour of the app: index.html, the login screen, the shared Maia shell tokens Assurance uses,
   public/themes/assurance.json (var() references) and the reports (services/orgReport.js and services/report.js inline
   the light block below at render time, so a released report never changes afterwards). A colour change is a change
   in this file only. Light values first; dark mode overrides the same tokens under prefers-color-scheme: dark.
   The four house colours (--lr-*, decided in B-139) are defined once; every semantic token refers to them or is a warm/slate tint:
   - slate (--lr-slate, --brand) is the one brand colour: text accents, headings, links on hover, active tabs, chips,
     secondary buttons, the left rule of cards and the "what now" blocks;
   - navy (--lr-navy, --brand-deep) is for dark surfaces only: the login band, the primary button (--primary) and the
     report heading; it is also the body text colour;
   - ivory (--lr-ivory) is the page, white (--lr-white) the cards and input fields; lines are warm light tints;
   - rose (--lr-rose, --lr-rose-light; B-146, changes B-140 point 2) is an ACCENT, not a second brand colour: thin
     lines (under the login band), the active tab indicator, the focus ring next to the slate one and small icons;
     on navy the light rose (the line under the wordmark). B-149: the one rose surface is the sign-in block on the
     login screen, with white text on it (about 4.54:1). Never small text on ivory or white (about 4:1 on
     ivory, below AA for normal text), never a status colour, never the primary button, never the logo.
   Slate stays the one brand colour; no metallic accent (B-139). Status colours and the Microsoft button are unchanged. */
:root {
  /* the house colours (B-139) */
  --lr-slate: #535E7B;
  --lr-navy: #1B2338;
  --lr-ivory: #F4EFE6;
  --lr-white: #FFFFFF;
  /* the rose accent (B-146): defined once, used only through the accent tokens below */
  --lr-rose: #9A6A64;
  --lr-rose-light: #D8C6BE;
  /* page, panels, lines (warm, matching ivory) */
  --bg: var(--lr-ivory);
  --surface: var(--lr-white);
  --line: #E2DBCF;
  --line-strong: #C9BFAE;
  --hover: #EEE8DD;
  /* text: navy body text; warm grey secondary and faint text, both AA (4.5:1) on ivory, white and the hover tint */
  --text: var(--lr-navy);
  --muted: #5C574F;
  --faint: #6A645A;
  /* brand: slate for accents, active navigation, headings and secondary buttons; navy (--brand-deep) for the primary
     button, its hover target and dark surfaces; a mid slate-navy as the soft tone; a light slate tint for chips */
  --brand: var(--lr-slate);
  --brand-deep: var(--lr-navy);
  --brand-soft: #3A4360;
  --brand-hover: var(--brand-deep);
  --brand-tint: #E9E8EA;
  --on-brand: #FFFFFF;
  /* the primary button: navy, slate on hover (light); in dark mode it follows the light brand colour */
  --primary: var(--brand-deep);
  --primary-hover: var(--brand);
  /* B-146: the rose accent for lines, the active tab indicator, the large login numbering and the second focus ring
     (rose on ivory about 4:1, on white about 4.5:1: lines, large text and focus indicators only, never small text);
     --accent-on-dark is the light rose on the navy band (lines and the line under the wordmark, AA on navy) */
  --accent: var(--lr-rose);
  --accent-line: var(--accent);
  --accent-on-dark: var(--lr-rose-light);
  /* B-141: the colour of the inline header logo (the brand file with currentColor): slate on the white header */
  --logo-ink: var(--lr-slate);
  --focus-accent: var(--accent);
  /* B-083: the "Wat moet ik nu doen?" blocks: a slightly darker slate tint than --brand-tint, with a slate rule */
  --now-bg: #DFDFE5;
  /* status colours (meaning unchanged): Aantoonbaar · Open · Te onderzoeken · Termijn verlopen; chip text on them */
  --s-verified: #1E8E5A;
  --s-open: #E07B1F;
  --s-tbd: #2D6FD8;
  --s-critical: #C8363D;
  --on-status: #FFFFFF;
  /* error row background, overlay and shadows (navy, never black or warm brown) */
  --bg-error: #FBECEC;
  --overlay: rgba(27, 35, 56, .45);
  --shadow-menu: 0 12px 32px rgba(27, 35, 56, .14);
  --shadow-dialog: 0 24px 60px rgba(27, 35, 56, .28);
  --shadow-hover: 0 6px 20px rgba(27, 35, 56, .08);
  /* login screen (B-093, B-140): the band is the house navy (--login-band to --login-panel, both navy) with a fine
     chalk pinstripe ("krijtstreep", 1px per 22px) and a soft glow; on it the logo, the line under it and the language
     switch in translucent white (B-149: the motto moved to the footer line). The ivory band below has a faint slate
     pinstripe; the sign-in block and the live monitor a soft navy shadow. */
  --login-band: var(--lr-navy);
  --login-panel: var(--brand-deep);
  --login-panel-text: #FFFFFF;
  --login-panel-soft: rgba(255, 255, 255, .88);
  --login-panel-muted: rgba(255, 255, 255, .72);
  --login-panel-line: rgba(255, 255, 255, .35);
  --login-stripe: rgba(255, 255, 255, .075);
  --login-glow: rgba(255, 255, 255, .07);
  --login-paper-stripe: rgba(83, 94, 123, .06);
  --login-card-shadow: 0 1px 0 rgba(27, 35, 56, .04), 0 18px 40px -24px rgba(27, 35, 56, .35);
  /* B-149: the sign-in block is a rose surface (the house rose, the same in both modes) with white text (about 4.54:1)
     and a white button with navy text; the focus ring there is white with a navy ring inside */
  --login-block: var(--lr-rose);
  --login-block-text: var(--lr-white);
  --login-block-btn: var(--lr-white);
  --login-block-btn-text: var(--lr-navy);
  /* Microsoft sign-in button: fixed by Microsoft's branding guideline, the same in both modes; also the report paper */
  --ms-bg: #FFFFFF;
  --ms-bg-hover: #F3F3F3;
  --ms-border: #8C8C8C;
  --ms-text: #5E5E5E;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* warm slate dark mode: slate-navy surfaces, ivory text, a light slate brand */
    --bg: #15171D;
    --surface: #1D2028;
    --line: #2E313A;
    --line-strong: #43464F;
    --hover: #252832;
    --text: #EEEAE2;
    --muted: #ADA79C;
    --faint: #9C968B;
    --brand: #AEB8D0;
    --brand-hover: #C7CEDF;
    --brand-tint: #262B39;
    --now-bg: #2D3344;
    /* B-146: a lighter rose accent on the dark surfaces (lines, tab indicator, focus ring, the numbering); the band
       stays navy, so --accent-on-dark keeps the light rose */
    --accent: #C9A39B;
    /* B-141: the header logo in a light slate on the dark header (about 9:1, AA) */
    --logo-ink: #AEB8D0;
    /* the primary button follows the light brand colour here (navy would vanish on the dark page) */
    --primary: var(--brand);
    --primary-hover: var(--brand-hover);
    /* the login band stays the house navy in dark mode (--brand turns light here); the paper pinstripe and the card
       shadow turn light-on-dark */
    --login-band: #1B2338;
    --login-paper-stripe: rgba(255, 255, 255, .03);
    --login-card-shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 18px 40px -24px rgba(0, 0, 0, .6);
    /* the dark-mode brand and status colours are light: dark text keeps chips and buttons readable */
    --on-brand: #15171D;
    --s-verified: #4FC28A;
    --s-open: #F09A4A;
    --s-tbd: #6E9BE8;
    --s-critical: #E8686C;
    --on-status: #0F141B;
    --bg-error: #3A1E22;
    --overlay: rgba(0, 0, 0, .6);
    --shadow-menu: 0 12px 32px rgba(0, 0, 0, .5);
    --shadow-dialog: 0 24px 60px rgba(0, 0, 0, .6);
    --shadow-hover: 0 6px 20px rgba(0, 0, 0, .4);
  }
}
/* Aliases used across the stylesheet and the shared Maia shell (packages/engine/public/maia-shell.css): Assurance maps
   them onto the tokens above, so no Support colour (and no older Assurance colour) reaches an Assurance page. */
:root {
  --ink: var(--text);
  --card: var(--surface);
  --header: var(--surface);
  --divider: var(--line);
  --tint: var(--brand-tint);
  --avatar: var(--brand-tint);
  --on-ink: var(--on-brand);
  --s-attention: var(--s-open);
  --canvas: var(--bg);
  --meta: var(--muted);
  /* the shell's generic .nav-btn rules colour Assurance's header and More-menu buttons too: keep them legible */
  --panel-bg: var(--brand);
  --panel-fg: var(--text);
  --panel-fg-muted: var(--muted);
  --panel-hover: var(--hover);
  --panel-line: var(--line);
  --panel-accent: var(--brand-tint);
  --panel-accent-fg: var(--brand);
  --row-quiet: var(--hover);
  --row-hover: var(--hover);
  --card-line: var(--line);
  color-scheme: light dark;
}