/* The family's tokens, shared by the home pages and LifeRPG (liferpg/ copies
   this file into its build), so the two look like one site: the semantic
   colors for both themes, with LifeRPG's names and values, and the type.
   Components use only these tokens. A page over the painted scene (scene.css)
   gets its own ink, accent and glass on top of them. The display settings
   set data-theme and lang. */
:root {
  color-scheme: light;
  --surface: #f5f5f7;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --surface-raised: #ededf0;
  --surface-hover: #e8e8ed;
  --line: #d9d9df;
  --line-faint: #e9e9ed;
  --ink: #1d1d1f;
  --ink-dim: #626269;
  --ink-faint: #6b6b73;
  --accent: #0066cc;
  --accent-bright: #0071e3;
  --accent-soft: #eaf3ff;
  --milestone: #946719;
  --milestone-soft: #f7f0df;
  /* The three rings: Work uses the accent; Lab and Life have their own hue. */
  --ring-work: var(--accent);
  --ring-lab: #0d9488;
  --ring-life: #8b5cf6;
  --map-land: #e4e5e9;
  --map-line: #ffffff;
  --map-region: #91a3bd;
  --map-city: #a4b7cc;
  --map-pin: #f5764f;
  --map-pin-hover: #ef6139;
  --map-pin-active: #e8472a;
  --map-overlay: rgba(255, 255, 255, .86);
  --heat-0: #eceef1;
  --heat-1: #b7d4fa;
  --heat-2: #78b0f5;
  --heat-3: #3484df;
  --heat-4: #0066cc;
  --nav-bg: rgba(245, 245, 247, .88);
  --shadow: 0 4px 24px rgba(0, 0, 0, .025);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, .1);
  --control-selected: #ffffff;
  /* One background for the whole page, with soft washes of color; the panes
     are translucent over it, so they read as one surface. */
  --page-bg: radial-gradient(90vw 75vh at 0% 0%, rgba(0, 113, 227, .075), transparent 70%),
    radial-gradient(80vw 80vh at 100% 100%, rgba(139, 92, 246, .065), transparent 70%), #f1f2f6;
  --pane: rgba(255, 255, 255, .6);
  --pane-line: rgba(28, 32, 48, .07);
  --ring-track: rgba(28, 32, 48, .1);
  --label-halo: #f8f8fa;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #101012;
  --panel: #1c1c1f;
  --panel-solid: #232326;
  --surface-raised: #28282c;
  --surface-hover: #333338;
  --line: #3b3b41;
  --line-faint: #2e2e33;
  --ink: #f5f5f7;
  --ink-dim: #b0b0b8;
  --ink-faint: #96969f;
  --accent: #6aafff;
  --accent-bright: #91c4ff;
  --accent-soft: #202e40;
  --milestone: #e5bd73;
  --milestone-soft: #332d23;
  --ring-lab: #2dd4bf;
  --ring-life: #a78bfa;
  --map-land: #2c2c32;
  --map-line: #1c1c1f;
  --map-region: #6483a5;
  --map-city: #50647b;
  --map-pin: #ff8a62;
  --map-pin-hover: #ff9d7b;
  --map-pin-active: #ff6a45;
  --map-overlay: rgba(28, 28, 31, .86);
  --heat-0: #2b2b30;
  --heat-1: #2b4b70;
  --heat-2: #376d9e;
  --heat-3: #4c94d9;
  --heat-4: #83bdff;
  --nav-bg: rgba(16, 16, 18, .88);
  --shadow: 0 4px 24px rgba(0, 0, 0, .08);
  --shadow-float: 0 8px 32px rgba(0, 0, 0, .28);
  --control-selected: #45454b;
  --page-bg: radial-gradient(90vw 75vh at 0% 0%, rgba(106, 175, 255, .09), transparent 70%),
    radial-gradient(80vw 80vh at 100% 100%, rgba(167, 139, 250, .08), transparent 70%), #0e0f13;
  --pane: rgba(34, 35, 41, .55);
  --pane-line: rgba(255, 255, 255, .07);
  --ring-track: rgba(255, 255, 255, .13);
  --label-halo: #1a1b20;
}

/* Type (docs/home-redesign.md §5). English: one family, Helvetica Neue, bold
   for headings. Chinese: the heaviest 宋体 for headings, 仿宋 for text (with
   Latin in Helvetica Neue). Each page sets its own sizes and weights. */
:root {
  --font-body: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-head: var(--font-body);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[lang^="zh"] {
  --font-head: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", "XT Song", SimSun, serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, "STFangsong", FangSong, "FangSong_GB2312", "XT Fangsong", "Songti SC", serif;
}
/* Chinese web fonts for devices without 仿宋 or 宋体 (phones, Linux): Zhuque
   Fangsong and Noto Serif SC (OFL), cut down at each build to the characters on
   the site (scripts/subset-fonts.py). They come after the system fonts in each
   stack, so a browser loads one only when the device has none of those. A
   phone asks for them early (a preload in the page's head); "fallback" waits
   up to 0.1 s for them before it shows another font, so a reload, which finds
   them at once, does not flash the phone's own font first. */
@font-face { font-family: "XT Fangsong"; src: url("fonts/fangsong.woff2") format("woff2"); font-weight: 400; font-display: fallback; unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: "XT Song"; src: url("fonts/song-bold.woff2") format("woff2"); font-weight: 700; font-display: fallback; unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }
@font-face { font-family: "XT Song"; src: url("fonts/song-black.woff2") format("woff2"); font-weight: 900; font-display: fallback; unicode-range: U+2E80-9FFF, U+F900-FAFF, U+FE30-FE4F, U+FF00-FFEF; }