/* ============================================================================
   tokens.css — v2 glass language, taken from prototype/head.html :root (hub
   the v14 redesign prototype) — prp/2026-09-26-pocket-web-v2, design §10.

   UNLIKE v1's tokens.css, this file is NOT extracted from the cockpit
   (src/mw_dashboard/web/app.css). Q1 of the design ("Pocket only") retired that
   extraction: `pocket/tools/extract_tokens.py` and `test_pocket_tokens.py` retire
   with the cut, replaced by a test that every custom property referenced by a
   `var()` call in use is defined in both themes (design §10). Hand-authored
   here, from the approved visual target.

   Both theme mechanisms are carried, exactly as v1's tokens.css does: the OS-signal
   `@media (prefers-color-scheme: dark)` twin (guarded by `:not([data-theme="light"])`
   so an explicit light choice is never overridden by the OS), and the explicit
   `[data-theme="dark"]` tumbler a person taps. `[data-theme="light"]` states the
   color-scheme so a light choice never inherits a dark native scrollbar/control.

   FONTS. Fraunces for headings, Literata for Cyrillic (prototype's :root[lang="ru"]
   override), Inter for UI — all self-hosted under fonts/, `@font-face` src URLs
   RELATIVE to this file so they resolve the same way under a plain static mount and
   under the gateway's /static/ prefix (the same invariant v1's tokens.css states).

   The WOFF2s are OFL subsets (Latin + Cyrillic) built from google/fonts; provenance,
   pinned axes and the rebuild recipe are in fonts/README.md.
   ============================================================================ */

@font-face {
  font-family: "Fraunces";
  font-weight: 300 600;
  font-style: normal;
  font-stretch: 50% 100%;
  src: url("fonts/fraunces-variable.woff2") format("woff2-variations"), url("fonts/fraunces-variable.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Literata";
  font-weight: 300 600;
  font-style: normal;
  src: url("fonts/literata-variable.woff2") format("woff2-variations"), url("fonts/literata-variable.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/inter-400.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  font-weight: 500;
  font-style: normal;
  src: url("fonts/inter-500.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  src: url("fonts/inter-600.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* surfaces */
  --bg: #f6f2ea;
  --side: #efe9de;
  --card: #fdfbf7;
  --sunk: #ebe4d7;
  /* ink */
  --ink: #28221a;
  --ink2: #5a5044;
  --ink3: #8f8472;
  --ink4: #c9bda9;
  --line: #e6ddcd;
  /* the one accent + semantic run/done */
  --you: #bf5418;
  --you-t: #f7e5d4;
  --run: #46669f;
  --done: #4d7a57;
  /* type */
  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* elevation */
  --sh: 0 1px 2px rgba(60, 40, 10, .05), 0 10px 30px -18px rgba(60, 40, 10, .22);
  --shl: 0 30px 80px -24px rgba(60, 40, 10, .35), 0 2px 6px rgba(60, 40, 10, .06);
  /* chart categoricals (heat map, Spend) */
  --k1: #46669f;
  --k2: #c08a2e;
  --k3: #6f8f5a;
  --k4: #8a6aa0;
  --k5: #b86a5a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #18150f;
    --side: #14110c;
    --card: #221e17;
    --sunk: #2b261e;
    --ink: #f1eadd;
    --ink2: #c2b7a5;
    --ink3: #8c8171;
    --ink4: #584f42;
    --line: #2f2a21;
    --you: #e8925a;
    --you-t: #3a2618;
    --run: #9db3e6;
    --done: #8fbf97;
    --sh: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -18px rgba(0, 0, 0, .7);
    --shl: 0 30px 80px -24px rgba(0, 0, 0, .8);
    --k1: #8fa9e0;
    --k2: #e0b464;
    --k3: #9dbf88;
    --k4: #b89ad0;
    --k5: #e0998a;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #18150f;
  --side: #14110c;
  --card: #221e17;
  --sunk: #2b261e;
  --ink: #f1eadd;
  --ink2: #c2b7a5;
  --ink3: #8c8171;
  --ink4: #584f42;
  --line: #2f2a21;
  --you: #e8925a;
  --you-t: #3a2618;
  --run: #9db3e6;
  --done: #8fbf97;
  --sh: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -18px rgba(0, 0, 0, .7);
  --shl: 0 30px 80px -24px rgba(0, 0, 0, .8);
  --k1: #8fa9e0;
  --k2: #e0b464;
  --k3: #9dbf88;
  --k4: #b89ad0;
  --k5: #e0998a;
}

:root[data-theme="light"] { color-scheme: light; }

/* Cyrillic reads on Literata, not Fraunces (prototype/head.html :root[lang="ru"]) */
:root[lang="ru"] { --serif: "Literata", Georgia, serif; }