/*
 * Canonical Personal Hub visual tokens.
 *
 * Both the WSL React application and the Mac static application consume this
 * file directly. Keep the personal-hub-theme storage contract in sync with the
 * application bootstraps and tests when changing theme behavior.
 */

/*
 * Type pairing changed 2026-08-23 from DM Sans / Instrument Serif to
 * Archivo / Newsreader, matching the wealth-planning app's "Quiet Instrument"
 * system so the hub, that app, and the public site read as one product.
 * Both are variable latin subsets (wght axis) vendored from
 * @fontsource-variable, self-hosted — no runtime request to Google Fonts.
 */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/archivo-latin.woff2") format("woff2-variations");
}

@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/newsreader-latin.woff2") format("woff2-variations");
}

:root {
  color-scheme: light;
  --font-interface: "Archivo";
  --font-editorial: "Newsreader";
  --bg: #f3f1ea;
  --panel: #fcfbf7;
  --panel-2: #ebe9e2;
  --text: #15211c;
  --muted: #647069;
  --border: rgba(21, 33, 28, 0.16);
  --primary: #1f5b45;
  --secondary: #bd7b2b;
  /* Ledger spine colours. Four, so no two adjacent blocks down the page share one. */
  --accent-cool: #3f6f92;
  --accent-clay: #a35a48;
  --status-online: #2f8b65;
  --status-checking: #9a6d24;
  --status-offline: #a34f43;
  --hair: rgba(21, 33, 28, 0.08);
  --mask: 100%;
  --grid-line: rgba(21, 33, 28, 0.016);
  --ambient: rgba(189, 123, 43, 0.08);
  /* Diffuse and radius-free: it lifts the ledger off the page without the panel
     edge that made 5c a card. */
  --lift: 0 2px 20px rgba(21, 33, 28, 0.055);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101512;
  --panel: #171d19;
  --panel-2: #1d2520;
  --text: #e7ece9;
  --muted: #9aa69f;
  --border: rgba(231, 236, 233, 0.14);
  --primary: #66b58f;
  --secondary: #d5a15f;
  --accent-cool: #7db0d4;
  --accent-clay: #d98d78;
  --status-online: #66b58f;
  --status-checking: #d5a15f;
  --status-offline: #df887d;
  --hair: rgba(231, 236, 233, 0.08);
  --mask: 100%;
  --grid-line: rgba(231, 236, 233, 0.014);
  --ambient: rgba(102, 181, 143, 0.05);
  --lift: 0 2px 20px rgba(0, 0, 0, 0.32);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #101512;
    --panel: #171d19;
    --panel-2: #1d2520;
    --text: #e7ece9;
    --muted: #9aa69f;
    --border: rgba(231, 236, 233, 0.14);
    --primary: #66b58f;
    --secondary: #d5a15f;
    --accent-cool: #7db0d4;
    --accent-clay: #d98d78;
    --status-online: #66b58f;
    --status-checking: #d5a15f;
    --status-offline: #df887d;
    --hair: rgba(231, 236, 233, 0.08);
    --mask: 100%;
    --grid-line: rgba(231, 236, 233, 0.014);
    --ambient: rgba(102, 181, 143, 0.05);
    --lift: 0 2px 20px rgba(0, 0, 0, 0.32);
  }
}