/* Valhallowed design tokens: colours, zones, type, and the fonts behind them.
   Dark (night surfaces, hearth gold) is the home theme; light is derived from it.
   data-theme="light" or "dark" on the root element overrides the system preference.
   The fonts ship in fonts/ (SIL Open Font License), so nothing loads from a third party. */

@font-face { font-family: "Alegreya SC"; font-weight: 500; font-display: swap; src: url("fonts/alegreya-sc-500.woff2") format("woff2"); }
@font-face { font-family: "Alegreya SC"; font-weight: 700; font-display: swap; src: url("fonts/alegreya-sc-700.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 400; font-display: swap; src: url("fonts/alegreya-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 500; font-display: swap; src: url("fonts/alegreya-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Alegreya Sans"; font-weight: 700; font-display: swap; src: url("fonts/alegreya-sans-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-600.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --bg: #0a0e18;
  --panel: #101828;
  --panel-2: #16203a;
  --line-subtle: #1e2a40;
  --line: #2a3a55;
  --line-strong: #4a5f85;
  --ink: #dfe6f2;
  --ink-muted: #98a5ba;
  --hearth: #ffd54f;
  --hearth-ink: #ffd54f;
  --on-hearth: #1a1405;
  --focus: #7e9dff;
  --z-ingress: #ffd54f;
  --z-control: #7e9dff;
  --z-runtime: #2ecc71;
  --z-data: #ff7043;
  --z-people: #f06292;
  --z-external: #98a5ba;
  --zc: var(--line-strong); /* the current element's zone colour; neutral unless a zone class sets it */
  --ok: #2ecc71;
  --warn: #ffb74d;
  --bad: #ef5350;
  --font-display: "Alegreya SC", "Iowan Old Style", Georgia, serif;
  --font-body: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f4f5f8;
    --panel: #ffffff;
    --panel-2: #eceff5;
    --line-subtle: #e0e5ee;
    --line: #c6cedc;
    --line-strong: #7f8ca6;
    --ink: #121a2b;
    --ink-muted: #4a566c;
    --hearth: #e9b824;
    --hearth-ink: #8a6200;
    --on-hearth: #1a1405;
    --focus: #3456d1;
    --z-ingress: #b58500;
    --z-control: #3456d1;
    --z-runtime: #1b8a4c;
    --z-data: #cf4f1c;
    --z-people: #c2185b;
    --z-external: #66728a;
    --ok: #1b8a4c;
    --warn: #b26a00;
    --bad: #c62828;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f5f8;
  --panel: #ffffff;
  --panel-2: #eceff5;
  --line-subtle: #e0e5ee;
  --line: #c6cedc;
  --line-strong: #7f8ca6;
  --ink: #121a2b;
  --ink-muted: #4a566c;
  --hearth: #e9b824;
  --hearth-ink: #8a6200;
  --on-hearth: #1a1405;
  --focus: #3456d1;
  --z-ingress: #b58500;
  --z-control: #3456d1;
  --z-runtime: #1b8a4c;
  --z-data: #cf4f1c;
  --z-people: #c2185b;
  --z-external: #66728a;
  --ok: #1b8a4c;
  --warn: #b26a00;
  --bad: #c62828;
}