@font-face {
  font-family: "Source Serif 4";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/source-serif-4-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/source-serif-4-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/source-serif-4-700.woff2") format("woff2");
}

/* Spirit skin — design tokens. A skin is this token set, not a fork (spec §11). */
:root {
  /* Brand (theme-independent) */
  --c-blue: #002D62;
  --c-blue-700: #16407a;
  --c-gold: #C8A951;
  --c-gold-bright: #e0a400;
  --c-gold-text: #ecc868;   /* gold TEXT on navy → AA */
  --c-crimson: #a4123f;

  /* Light surfaces */
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-translucent: rgba(247, 250, 253, 0.62);
  --text: #1f2a37;
  --text-muted: #586470;    /* was #6b7681 — now AA on --bg */
  --border: #d0d7de;

  --header-bg: var(--c-blue);
  --header-text: #ffffff;
  --accent: var(--c-gold);
  --pulse: var(--c-crimson);

  /* Semantic / component */
  --danger: var(--c-crimson);
  --on-gold: #3a2e00;
  --on-navy: #ffffff;
  --focus-ring-color: var(--c-gold-bright);
  --control-bg: rgba(255, 255, 255, .14);
  --control-border: rgba(255, 255, 255, .5);
  --control-text: #ffffff;
  --search-bg: var(--control-bg);
  --search-text: var(--control-text);
  --search-placeholder: rgba(255, 255, 255, .7);
  --badge-bg: #fdecc8;
  --badge-text: #7a5400;
  --btn-primary-bg: linear-gradient(160deg, var(--c-blue-700) 0%, var(--c-blue) 60%, #001f47 100%);
  --btn-primary-border: var(--c-gold);
  --btn-primary-text: #ffffff;
  --card-bg: var(--surface);
  --card-border: var(--border);

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  /* Type scale (rem — respects user font size) */
  --fs-caption: .6875rem;
  --fs-meta: .75rem;
  --fs-body: .8125rem;
  --fs-base: .875rem;
  --fs-lg: 1rem;
  --fs-h3: 1.25rem;
  --fs-h2: 1.5rem;
  --fs-h1: 1.75rem;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --ls-caps: .04em;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spacing scale (4px base; --sp-7/28px omitted — no current consumer) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --gutter: 16px;

  /* Radii & shadows */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 4px rgba(0, 0, 0, .12);
  --shadow-2: 0 2px 10px rgba(0, 0, 0, .18);
  --shadow-3: 0 -4px 20px rgba(0, 0, 0, .16);
  --sheet-blur: blur(16px) saturate(150%);

  /* Dimensional ("raised") treatment — derived from our cool palette.
     Heavier depth per design checkpoint (session 014). */
  --raised-bg: linear-gradient(157deg, var(--surface) 0%, #dbe3ee 100%);
  --raised-border: var(--border);
  --raised-shadow:
    0 16px 32px rgba(15, 42, 80, .18),
    0 5px 10px rgba(15, 42, 80, .14),
    inset 0 2px 1px rgba(255, 255, 255, .95),
    inset 0 -5px 11px rgba(15, 42, 80, .08);
  --raised-shadow-sm:
    0 5px 12px rgba(15, 42, 80, .22),
    0 1px 3px rgba(15, 42, 80, .16),
    inset 0 1.5px 1px rgba(255, 255, 255, .9);
}

[data-theme="dark"] {
  --bg: #0a1d35;
  --surface: #0f2742;
  --surface-translucent: rgba(15, 39, 66, 0.60);
  --text: #eaf0f8;
  --text-muted: #9fb2c9;
  --border: #1d3a5c;
  --header-bg: #061327;
  --badge-bg: rgba(224, 164, 0, .18);
  --badge-text: #f0cf7a;
  --btn-primary-bg: linear-gradient(160deg, #1d4a85 0%, #0b2b57 100%);
  --btn-primary-border: var(--c-gold);
  --btn-primary-text: var(--c-gold);
  --raised-bg: linear-gradient(157deg, #1a3656 0%, #0c2038 100%);
  --raised-border: var(--border);
  --raised-shadow:
    0 16px 32px rgba(0, 0, 0, .62),
    0 5px 11px rgba(0, 0, 0, .52),
    inset 0 2px 1px rgba(255, 255, 255, .08),
    inset 0 -5px 11px rgba(0, 0, 0, .42);
  --raised-shadow-sm:
    0 5px 13px rgba(0, 0, 0, .58),
    0 1px 3px rgba(0, 0, 0, .48),
    inset 0 1.5px 1px rgba(255, 255, 255, .08);
}