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

   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 NewLayout writes from the user's profile.
   Adding a token means adding it to BOTH blocks or the light theme inherits dark's value.

   Names say the job, not the colour: --accent, not --yellow. The old names (--dark,
   --menu, --yellow, --menu-hover, --dlg-light) also collided with bootstrap's
   :root --dark / --yellow, so a bootstrap rule reading var(--dark) got ours. */
:root {
    /* ── Surfaces ── */
    --bg-app: #102033;
    --bg-surface: #1c2b3d;
    --bg-surface-hover: #2b3b4d;
    --bg-surface-alt: #2d3c4f;
    --bg-raised: #354053;
    --bg-hover: #4d77a8;
    --bg-input: #283d57;
    --bg-input-disabled: #38567a;

    /* ── Text ──
       Four steps, lightest first: body text, secondary labels, controls at rest, metadata. */
    --text: #ffffff;
    --text-secondary: #bfb7bf;
    --text-idle: #7f878f;
    --text-meta: #6c757d;

    /* ── Accent ──
       --accent fills (an active tile, a progress bar); --accent-text colours text and
       borders. They are the same yellow in dark and must not be in light, where yellow
       text on a white card is unreadable. */
    --accent: #ffc737;
    --accent-hover: #ffdf4c;
    --accent-text: #ffc737;
    --text-on-accent: #102033;

    /* The study/print/download menus run a heavier yellow than the shell's. */
    --accent-strong: #fbcb00;
    --accent-strong-hover: #ffdf4c;
    --accent-muted: #c1ae3f;
    --accent-border: #f1ae3f;

    /* ── Lines ── */
    --border: #283d57;
    --border-subtle: rgba(255, 255, 255, 0.18);

    /* Zebra striping and row hover, as a tint over whatever surface is underneath. */
    --row-stripe: rgba(255, 255, 255, 0.07);
    --row-hover: rgba(255, 255, 255, 0.34);

    /* ── Status ──
       Only the ones used more than once. A single green Excel icon or red asterisk is
       theme-independent and keeps its literal. */
    --success: #39a355;
    --success-focus: #49d375;
    --danger: #dc3545;
    --info: #0061e8;
    --ok: #06cf66;
    --link: #0052bf;

    /* ── Viewport ──
       Fixed in both themes on purpose: a white viewport behind a greyscale study is
       clinically wrong, and the overlay text has to read against the image, not the shell. */
    --viewport-bg: #000000;
    --viewport-text: #ffcc00;
    --viewport-outline: #000000;
    --viewport-frame: #aaaaaa;

    /* ── Metrics ── */
    --icon-size: 3em;
}

/* Light. Surfaces and text inverted; the accent fill, the status colours and every
   viewport token stay where they are. */
:root[data-theme="light"] {
    --bg-app: #f4f6f9;
    --bg-surface: #ffffff;
    --bg-surface-hover: #eef2f7;
    --bg-surface-alt: #e7ecf3;
    --bg-raised: #ffffff;
    --bg-hover: #cfe0f5;
    --bg-input: #eef2f7;
    --bg-input-disabled: #dde4ec;

    --text: #1b2430;
    --text-secondary: #4a5563;
    --text-idle: #5c6773;
    --text-meta: #6c757d;

    --accent-text: #8a6100;
    --accent-strong: #8a6100;
    --accent-strong-hover: #6d4c00;
    --accent-muted: #7a6a20;
    --accent-border: #c19430;

    --border: #ccd5e0;
    --border-subtle: rgba(0, 0, 0, 0.12);
    --row-stripe: rgba(0, 0, 0, 0.04);
    --row-hover: rgba(0, 0, 0, 0.10);
}