/* Blueshade theme v1 - shared colour, type and toggle tokens for every Blueshade app.
   Palette: Blueshade Bridge navy (#0d2240) and gold (#c8a24c); Jost for headings and controls.
   Source of truth: github.com/chiefquackers/Blueshade-Theme. Apps get a copy from a pinned tag (sync-theme) - do not edit the copy.

   Light tokens apply under :root and [data-theme="light"]; dark under [data-theme="dark"], and under prefers-color-scheme: dark
   when the page has no data-theme="light" (no-JS fallback - theme-preload.js normally sets data-theme before first paint).
   .bs-theme-light / .bs-theme-dark force one palette inside an element (e.g. a panel that stays dark in light mode).
   Text/background pairs meet WCAG 2.1 AA (4.5:1, 3:1 for focus/borders that carry meaning); test/contrast.mjs checks them. */

@font-face { font-family: "Jost"; src: url("fonts/jost-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; src: url("fonts/jost-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---- light (default) */
:root,
[data-theme="light"],
.bs-theme-light {
  --bs-font-heading: "Jost", "Segoe UI", system-ui, sans-serif;
  --bs-font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bs-font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;
  --bs-radius: 8px;
  --bs-navy: #0d2240;
  --bs-gold: #c8a24c;

  --bs-bg: #f3f5f8;
  --bs-surface: #ffffff;
  --bs-surface-2: #f7f9fc;
  --bs-field: #ffffff;
  --bs-code-bg: #edf1f6;
  --bs-text: #142033;
  --bs-muted: #5d6b80;
  --bs-border: #d9dfe8;
  --bs-border-strong: #b6c1d1;
  --bs-field-border: #7d8a9e;
  --bs-link: #24588f;
  --bs-primary: #0d2240;
  --bs-primary-hover: #163156;
  --bs-primary-text: #ffffff;
  --bs-accent: #c8a24c;
  --bs-accent-soft: #f4ead2;
  --bs-accent-text: #7a5d17;
  --bs-on-accent: #0d2240;
  --bs-header-bg: #0d2240;
  --bs-header-text: #ffffff;
  --bs-header-muted: #c9d4e4;
  --bs-ok: #276b48;   --bs-ok-soft: #e2f2e9;
  --bs-warn: #8a5a0f; --bs-warn-soft: #fbefd6;
  --bs-bad: #b23a33;  --bs-bad-soft: #f8e1df;
  --bs-info: #24588f; --bs-info-soft: #e1ecf8;
  --bs-focus: #a9822f;
  --bs-overlay: rgba(8, 22, 41, .55);
  --bs-shadow: 0 1px 2px rgba(13, 34, 64, .08), 0 4px 14px rgba(13, 34, 64, .06);
  color-scheme: light;
}

/* ---- dark: the same block twice - explicit choice, and the OS preference when nothing is chosen */
[data-theme="dark"],
.bs-theme-dark {
  --bs-bg: #081629;
  --bs-surface: #0d2240;
  --bs-surface-2: #163156;
  --bs-field: #081629;
  --bs-code-bg: #163156;
  --bs-text: #edf1f7;
  --bs-muted: #a4b2c6;
  --bs-border: #24426b;
  --bs-border-strong: #33507a;
  --bs-field-border: #5c7699;
  --bs-link: #8cbcf0;
  --bs-primary: #c8a24c;
  --bs-primary-hover: #d9ba6a;
  --bs-primary-text: #0d2240;
  --bs-accent: #c8a24c;
  --bs-accent-soft: #3a3220;
  --bs-accent-text: #e0c27a;
  --bs-on-accent: #0d2240;
  --bs-header-bg: #06111f;
  --bs-header-text: #ffffff;
  --bs-header-muted: #c9d4e4;
  --bs-ok: #6fd3a0;   --bs-ok-soft: #12372a;
  --bs-warn: #f0c060; --bs-warn-soft: #3b2d0c;
  --bs-bad: #f4938b;  --bs-bad-soft: #3f1b1e;
  --bs-info: #8cbcf0; --bs-info-soft: #142f50;
  --bs-focus: #e0c27a;
  --bs-overlay: rgba(0, 0, 0, .65);
  --bs-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bs-bg: #081629;
    --bs-surface: #0d2240;
    --bs-surface-2: #163156;
    --bs-field: #081629;
    --bs-code-bg: #163156;
    --bs-text: #edf1f7;
    --bs-muted: #a4b2c6;
    --bs-border: #24426b;
    --bs-border-strong: #33507a;
  --bs-field-border: #5c7699;
    --bs-link: #8cbcf0;
    --bs-primary: #c8a24c;
    --bs-primary-hover: #d9ba6a;
    --bs-primary-text: #0d2240;
    --bs-accent: #c8a24c;
    --bs-accent-soft: #3a3220;
    --bs-accent-text: #e0c27a;
    --bs-on-accent: #0d2240;
    --bs-header-bg: #06111f;
    --bs-header-text: #ffffff;
    --bs-header-muted: #c9d4e4;
    --bs-ok: #6fd3a0;   --bs-ok-soft: #12372a;
    --bs-warn: #f0c060; --bs-warn-soft: #3b2d0c;
    --bs-bad: #f4938b;  --bs-bad-soft: #3f1b1e;
    --bs-info: #8cbcf0; --bs-info-soft: #142f50;
    --bs-focus: #e0c27a;
    --bs-overlay: rgba(0, 0, 0, .65);
    --bs-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

/* Variables inherit but a computed colour does not re-resolve, so a forced block sets its own text colour. */
.bs-theme-light, .bs-theme-dark { color: var(--bs-text); }

/* No white flash behind the page while it loads. */
html { background-color: var(--bs-bg); }

/* ---- Light / Dark / System toggle (rendered by theme.js into [data-bs-theme-toggle] or BlueshadeTheme.renderToggle).
   It takes its text colour from where it sits, so it works on a navy header and on a light page. */
.bs-theme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 2px; margin: 0; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 999px; font-family: var(--bs-font-heading); line-height: 1; vertical-align: middle; white-space: nowrap; }
.bs-theme-toggle button { display: inline-flex; align-items: center; gap: .3rem; min-height: 28px; min-width: 28px; justify-content: center; margin: 0; padding: .25rem .55rem; border: 0; border-radius: 999px; background: transparent; color: inherit; font: 500 .78rem/1 var(--bs-font-heading); letter-spacing: .02em; cursor: pointer; box-shadow: none; text-transform: none; width: auto; }
.bs-theme-toggle button:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
.bs-theme-toggle button[aria-pressed="true"] { background: var(--bs-gold); color: var(--bs-navy); }
.bs-theme-toggle button:focus-visible { outline: 2px solid var(--bs-focus); outline-offset: 2px; }
.bs-theme-toggle svg { width: 14px; height: 14px; flex: none; }
.bs-theme-toggle .bs-theme-label { display: inline; }
.bs-theme-toggle.bs-compact .bs-theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 480px) {
  .bs-theme-toggle .bs-theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---- Paper is always light: bills, invoices and reports print with the light palette even when the screen is dark
   (selectors match every dark rule above, later in the file, so they win). The switch itself is not printed. */
@media print {
  :root, :root[data-theme="dark"], :root:not([data-theme="light"]), [data-theme="dark"], .bs-theme-dark {
    --bs-navy: #0d2240;
    --bs-gold: #c8a24c;
    --bs-bg: #f3f5f8;
    --bs-surface: #ffffff;
    --bs-surface-2: #f7f9fc;
    --bs-field: #ffffff;
    --bs-code-bg: #edf1f6;
    --bs-text: #142033;
    --bs-muted: #5d6b80;
    --bs-border: #d9dfe8;
    --bs-border-strong: #b6c1d1;
    --bs-field-border: #7d8a9e;
    --bs-link: #24588f;
    --bs-primary: #0d2240;
    --bs-primary-hover: #163156;
    --bs-primary-text: #ffffff;
    --bs-accent: #c8a24c;
    --bs-accent-soft: #f4ead2;
    --bs-accent-text: #7a5d17;
    --bs-on-accent: #0d2240;
    --bs-header-bg: #0d2240;
    --bs-header-text: #ffffff;
    --bs-header-muted: #c9d4e4;
    --bs-ok: #276b48;
    --bs-ok-soft: #e2f2e9;
    --bs-warn: #8a5a0f;
    --bs-warn-soft: #fbefd6;
    --bs-bad: #b23a33;
    --bs-bad-soft: #f8e1df;
    --bs-info: #24588f;
    --bs-info-soft: #e1ecf8;
    --bs-focus: #a9822f;
    --bs-overlay: rgba(8, 22, 41, .55);
    --bs-shadow: 0 1px 2px rgba(13, 34, 64, .08), 0 4px 14px rgba(13, 34, 64, .06);
    color-scheme: light;
  }
  html { background-color: #ffffff; }
  .bs-theme-toggle { display: none !important; }
}