/* Design tokens. Loaded after bootstrap.css and before style.css/site.css, so nothing of
   ours has to know a hex literal and bootstrap's own :root block cannot shadow these.

   Two themes. Dark is the default and the only one the app had; light is the override
   block, keyed off data-theme on <html>, which the layouts write from the user's profile
   (Services/ThemeContext.cs). Adding a token means adding it to BOTH blocks, or the light
   theme silently inherits dark's value.

   Kept the app's original names (--dark, --menu, --yellow, --menu-hover, --dlg-light,
   --dropdown-search, --dropdown-hover) instead of renaming to AdminPanel's --bg- / --text-
   prefixed scheme, so the existing var() usages in style.css/site.css keep working unchanged
   — that full rename is a separate, larger pass over those stylesheets.

   --yellow / --on-accent are split from the plain surface tokens because they are used as
   BOTH a fill and a foreground colour in style.css/site.css: the same yellow that reads
   fine as an active-tile background is unreadable as body text on a white card, and dark
   navy foreground text stops being visible once the surface it sits on turns light. So:
     --yellow      the accent FILL (active tiles, active page link) — same value in both
                   themes, exactly like AdminPanel's --accent.
     --yellow-text accent used as FOREGROUND (links, hover text, selected option) — the
                   value that changes in light, like AdminPanel's --accent-text.
     --on-accent   fixed dark navy text painted ON TOP of the --yellow fill (e.g. the active
                   nav item's own label) — never overridden in light, exactly like
                   AdminPanel's --text-on-accent, because it is always paired with the fill,
                   never with the page background.

   --bg-surface-alt, --bg-input, --bg-input-disabled, --text-idle and --border cover a second
   batch of colours found hardcoded throughout style.css/site.css (#2d3c4f, #283d57, #38567a,
   #7f878f) that turned out to be byte-for-byte the same values AdminPanel already uses for
   these exact roles — so their light-theme values are borrowed from AdminPanel's tokens.css
   too, rather than picked fresh. */
:root {
    --dark: #102033;
    --menu: #1c2b3d;
    --bg-surface-alt: #2d3c4f;
    --bg-input: #283d57;
    --bg-input-disabled: #38567a;
    --text: #ffffff;
    --text-idle: #7f878f;
    --yellow: #ffc737;
    --yellow-text: #ffc737;
    --on-accent: #102033;
    --menu-hover: #4D77A8;
    --icon-size: 3em;
    --dlg-light: #354053;
    --dropdown-search: #243545;
    --dropdown-hover: #2c4054;
    --border: #283d57;
    --danger: #dc3545;
}

/* Light. Surfaces and text inverted; the accent fill and --on-accent stay put. */
:root[data-theme="light"] {
    --dark: #f4f6f9;
    --menu: #ffffff;
    --bg-surface-alt: #e7ecf3;
    --bg-input: #eef2f7;
    --bg-input-disabled: #dde4ec;
    --text: #1b2430;
    --text-idle: #5c6773;
    --yellow-text: #8a6100;
    --menu-hover: #cfe0f5;
    --dlg-light: #ffffff;
    --dropdown-search: #ffffff;
    --dropdown-hover: #eef2f7;
    --border: #ccd5e0;
    --danger: #dc3545;
}