/* 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; }
}