/* =============================================================================================
 * METQMS — ACCENT / APPEARANCE SCHEMES.  ONE definition, loaded by BOTH surfaces.
 *
 * WHY THIS FILE EXISTS.
 * The console (public/css/styles.css) carried these blocks inline, and the public front page
 * (public/site.html) carried its own hand-copied set of the same tokens under the comment "lifted
 * from /css/styles.css so the two pages stay in step". Two copies kept in step by hand is the exact
 * shape of every drift defect found in this system — the copy is corrected once, the original moves
 * on, and nobody notices until the two disagree in front of a customer.
 *
 * So the palettes live here, once. The console links this file AFTER styles.css, and site.html links
 * ONLY this file — it still never loads the console's layout stylesheet, which was a deliberate
 * decision about the public page's weight and independence. Tokens are shared; layout is not.
 *
 * LOAD ORDER IS LOAD-BEARING. A media query and a plain rule have the SAME specificity, so a scheme
 * override only wins because this file comes later. Linking it before styles.css silently does
 * nothing — it measures exactly as if it were absent. (That is not hypothetical; it cost a
 * rebuild-and-measure cycle on .msg-popup.)
 *
 * WHAT A SCHEME MAY CHANGE.
 * Accent and surface tokens only. The semantic colours — --ok, --warn, --bad, --info — are NEVER
 * redefined here. On a quality system pass, fail, overdue and out-of-tolerance carry meaning, and a
 * site that re-themed its console must not change what "fail" looks like.
 *
 * Every foreground/background pair below was measured for WCAG-AA (4.5:1) before being written.
 * ============================================================================================= */

/* ---------------------------------------------------------------------------------------------
 * REFINED — the modern, professional appearance.
 *
 * Not a louder accent: the modern feel comes from the NEUTRALS and the surfaces. Panels go to pure
 * white so content reads as paper on a desk; the page behind them cools and lightens to give the
 * cards air; borders soften while text darkens, which raises contrast and lowers noise at the same
 * time; shadows become wider and fainter so depth is suggested rather than drawn; and the corner
 * radius grows slightly. The rail becomes a deep neutral navy rather than a coloured band, which is
 * what makes a console read as a tool rather than a brochure.
 *
 * The accent stays recognisably M-E-T teal, deepened a little for contrast on white.
 * ------------------------------------------------------------------------------------------- */
[data-scheme="refined"]{
  --bg:#f4f6f9; --panel:#ffffff; --panel-2:#f6f8fb; --glass:rgba(255,255,255,.86);
  --ink:#111827; --ink-soft:#3d4756; --muted:#4d5766; --faint:#5b6675;
  --line:#e7ebf1; --line-strong:#d3dae3;
  --brand:#0d6e80; --brand-dark:#095361; --brand-light:#12879d; --brand-soft:#e8f3f5;
  --side-1:#0f172a; --side-2:#16213a; --side-ink:#c6cfdd; --side-faint:#8b9bb0;
  /* Wider, fainter shadows read as depth; the old tight ones read as an outline. */
  --shadow-sm:0 1px 2px rgba(16,24,40,.04);
  --shadow:0 1px 3px rgba(16,24,40,.05),0 8px 24px rgba(16,24,40,.06);
  --shadow-lg:0 24px 64px rgba(16,24,40,.18);
  --radius:14px; --radius-sm:10px; --r-ctl:10px;
}
[data-scheme="refined"][data-theme="dark"]{
  --bg:#0d1219; --panel:#131a23; --panel-2:#161d26; --glass:rgba(19,26,35,.86);
  --ink:#e9edf3; --ink-soft:#c2cad6; --muted:#a8b3c2; --faint:#8e9aa9;
  --line:#222c39; --line-strong:#2e3a49;
  --brand:#4fb3c9; --brand-dark:#49a4b8; --brand-light:#6cc6d9; --brand-soft:#12252c;
  --side-1:#080d14; --side-2:#0f1723; --side-ink:#c6cfdd; --side-faint:#8b9bb0;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.34);
  --shadow-lg:0 24px 64px rgba(0,0,0,.55);
  --radius:14px; --radius-sm:10px; --r-ctl:10px;
}

/* THE SAME DARK PALETTE, FOR THE SURFACE THAT ASKS THE OPERATING SYSTEM INSTEAD.
 *
 * The console decides light/dark itself and stamps data-theme on <html>. The public front page
 * does not — it follows prefers-color-scheme, because a visitor has no account to hold a
 * preference in. So the dark tokens have to be reachable BOTH ways or the front page would take
 * the light palette on a dark-mode phone.
 *
 * :not([data-theme="light"]) is the guard that keeps the two from colliding: a console explicitly
 * set to light keeps light even on a dark-mode machine, while a surface that has expressed no
 * preference follows the system. Without it, choosing light in the console would be overridden by
 * the operating system — the setting would appear to do nothing.
 *
 * Values identical to the [data-theme="dark"] block above; kept literal rather than aliased
 * because a custom property cannot be forward-declared across a media boundary without a second
 * indirection that is harder to read than the repetition. */
@media (prefers-color-scheme: dark){
  [data-scheme="refined"]:not([data-theme="light"]){
    --bg:#0d1219; --panel:#131a23; --panel-2:#161d26; --glass:rgba(19,26,35,.86);
    --ink:#e9edf3; --ink-soft:#c2cad6; --muted:#a8b3c2; --faint:#8e9aa9;
    --line:#222c39; --line-strong:#2e3a49;
    --brand:#4fb3c9; --brand-dark:#49a4b8; --brand-light:#6cc6d9; --brand-soft:#12252c;
    --side-1:#080d14; --side-2:#0f1723; --side-ink:#c6cfdd; --side-faint:#8b9bb0;
    --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.34);
  }
  [data-scheme="slate"]:not([data-theme="light"]){ --brand:#6f9dc9; --brand-dark:#6d91b4; --brand-light:#8ab4da; --brand-soft:#182634; --side-1:#0d151d; --side-2:#111b24; }
  [data-scheme="indigo"]:not([data-theme="light"]){ --brand:#8d94d5; --brand-dark:#8187bf; --brand-light:#a5abe4; --brand-soft:#1e2138; --side-1:#12141f; --side-2:#191d2e; }
  [data-scheme="forest"]:not([data-theme="light"]){ --brand:#5fb489; --brand-dark:#559b76; --brand-light:#7cc9a1; --brand-soft:#14281f; --side-1:#0d1712; --side-2:#12211a; }
  [data-scheme="graphite"]:not([data-theme="light"]){ --brand:#94a1ae; --brand-dark:#838f9a; --brand-light:#adb8c3; --brand-soft:#20262d; --side-1:#0e1216; --side-2:#151a20; }
}

/* ---------------------------------------------------------------------------------------------
 * The existing accent schemes, moved here unchanged from styles.css. Byte-for-byte the same values,
 * so any site already running one of these sees no difference whatsoever.
 * ------------------------------------------------------------------------------------------- */

/* Slate — muted navy-grey; the most conservative alternative to teal. */
[data-scheme="slate"]{ --brand:#3a5b7d; --brand-dark:#2a4460; --brand-light:#476e95; --brand-soft:#e8edf3; --side-1:#16232f; --side-2:#1d3243; }
[data-scheme="slate"][data-theme="dark"]{ --brand:#6f9dc9; --brand-dark:#6d91b4; --brand-light:#8ab4da; --brand-soft:#182634; --side-1:#0d151d; --side-2:#111b24; }
/* Indigo — cooler, higher-contrast; good on bright ward lighting. */
[data-scheme="indigo"]{ --brand:#42497f; --brand-dark:#313764; --brand-light:#565e99; --brand-soft:#eceef7; --side-1:#1b1e35; --side-2:#272c4b; }
[data-scheme="indigo"][data-theme="dark"]{ --brand:#8d94d5; --brand-dark:#8187bf; --brand-light:#a5abe4; --brand-soft:#1e2138; --side-1:#12141f; --side-2:#191d2e; }
/* Forest — deep green; distinct from the semantic --ok green, which is unchanged. */
[data-scheme="forest"]{ --brand:#2f6b4f; --brand-dark:#22513b; --brand-light:#3d8563; --brand-soft:#e7f1eb; --side-1:#132620; --side-2:#1a382c; }
[data-scheme="forest"][data-theme="dark"]{ --brand:#5fb489; --brand-dark:#559b76; --brand-light:#7cc9a1; --brand-soft:#14281f; --side-1:#0d1712; --side-2:#12211a; }
/* Graphite — monochrome; for sites that want the UI to recede entirely. */
[data-scheme="graphite"]{ --brand:#4a545e; --brand-dark:#363e46; --brand-light:#5e6a76; --brand-soft:#eceef1; --side-1:#1b2026; --side-2:#262d35; }
[data-scheme="graphite"][data-theme="dark"]{ --brand:#94a1ae; --brand-dark:#838f9a; --brand-light:#adb8c3; --brand-soft:#20262d; --side-1:#0e1216; --side-2:#151a20; }