/* The look, set once (R7). Taken from design/preview/site.html and design/preview/screens.html; every
   screen reads these and nothing else. Light by default, dark when the system asks for it, and either
   when the reader chooses one in Settings (data-theme on <html>). */

:root {
  /* colour */
  --ink: #10131a;
  --muted: #566072;
  --faint: #8b93a3;
  --paper: #f7f8fa;
  --paper-2: #eceff4;
  --rule: #dde1e9;
  --tint: #e6eaf3;
  --line: #c6ccd8;            /* the film's drawn lines of text */
  --ghost: #a3aab8;           /* the original's pale ink while its translation arrives */
  --accent: #2b3fe0;
  --accent-ink: #fff;
  --warn: #8a5a1b;
  --warn-bg: rgba(138, 90, 27, .1);
  --danger: #c22f24;
  --danger-bg: rgba(179, 38, 30, .07);
  --pin: #f0a81c;             /* fixed parts, and the warm pulse of a tap */
  --code-bg: #151a26;         /* code is dark in both appearances */
  --code-rule: #293044;
  --code-ink: #c9d3ea;
  --code-muted: #9fb0d4;
  --code-hover: #263048;
  --code-done: #7ee0a3;
  --shadow-soft: 0 1px 3px rgba(20, 24, 33, .05), 0 10px 30px -18px rgba(20, 24, 33, .3);
  --shadow-sheet: 0 -12px 40px -12px rgba(5, 7, 20, .4);
  --scrim: rgba(5, 7, 13, .38);
  color-scheme: light;

  /* type: two families, and a CJK companion chosen by the language */
  --cjk: 'Noto Serif SC';
  --cjk-fallback: 'Noto Serif SC Fallback Apple', 'Noto Serif SC Fallback';
  --sans: 'Inter Variable', 'Inter Fallback Arial', 'Inter Fallback Roboto', -apple-system, system-ui, 'Segoe UI', 'PingFang SC', 'Hiragino Sans',
    'Apple SD Gothic Neo', 'Noto Sans CJK SC', sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-meta: 12.5px;
  --text-sub: 13.5px;
  --text-label: 14.5px;
  --text-button: 15px;
  --text-screen: 17px;        /* a screen's heading */
  --text-title: 21px;         /* an article's title on a phone */
  --text-body: 19px;          /* reading text (spec/reading-mode.md) */
  --text-figure: 46px;        /* the balance */
  --leading-body: 1.7;
  --leading-ui: 1.5;

  /* spacing and shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --gutter: 19px;             /* a screen's side margin on a phone */
  --radius-s: 7px;
  --radius-m: 10px;
  --radius-l: 13px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --measure: 68ch;

  /* motion (spec/motion.md): arrivals ease out and settle; departures are quick; what a finger
     pushed may overshoot slightly */
  --ease-arrive: cubic-bezier(.2, .8, .2, 1);
  --ease-leave: cubic-bezier(.5, 0, .8, .4);
  --ease-pushed: cubic-bezier(.3, 1.35, .4, 1);
  --ease-glide: cubic-bezier(.2, .9, .2, 1);   /* fixed parts: a curve that overshoots nothing */
  --t-hover: .14s;
  --t-move: .5s;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --ink: #eef1f6; --muted: #98a2b5; --faint: #6b7486;
    --paper: #0c0f16; --paper-2: #131722; --rule: #252b3a; --tint: #1a2030; --line: #394156; --ghost: #566074;
    --accent: #8094ff; --accent-ink: #0c0f16;
    --warn: #ffc24d; --warn-bg: rgba(216, 168, 96, .13);
    --danger: #ff8a80; --danger-bg: rgba(255, 138, 128, .1);
    --pin: #ffc24d; --scrim: rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme=dark] {
  --ink: #eef1f6; --muted: #98a2b5; --faint: #6b7486;
  --paper: #0c0f16; --paper-2: #131722; --rule: #252b3a; --tint: #1a2030; --line: #394156; --ghost: #566074;
  --accent: #8094ff; --accent-ink: #0c0f16;
  --warn: #ffc24d; --warn-bg: rgba(216, 168, 96, .13);
  --danger: #ff8a80; --danger-bg: rgba(255, 138, 128, .1);
  --pin: #ffc24d; --scrim: rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* The CJK companion follows the language of the text it sets. --serif is resolved again on every
   element that names a language, so it picks up that element's --cjk rather than the page's.
   Each served family is followed by local fonts matched to its metrics (public/font-fallbacks.css), which
   set the text until it arrives in the same space, so nothing re-wraps when it does (spec/motion.md, Loading). */
:root, [lang] {
  --serif: 'Source Serif 4 Variable', var(--cjk), 'Source Serif Fallback Georgia', 'Source Serif Fallback Noto', var(--cjk-fallback), Charter, Georgia, serif;
  /* The same, for type set at display size, where the serif's optical size narrows it: 60 px and up (the
     top of the optical range), and 44 px. --serif-display is the public page's headline, 44 px on a phone. */
  --serif-60: 'Source Serif 4 Variable', var(--cjk), 'Source Serif 60 Fallback Georgia', 'Source Serif 60 Fallback Noto', var(--cjk-fallback), Charter, Georgia, serif;
  --serif-44: 'Source Serif 4 Variable', var(--cjk), 'Source Serif 44 Fallback Georgia', 'Source Serif 44 Fallback Noto', var(--cjk-fallback), Charter, Georgia, serif;
  --serif-display: var(--serif-60);
}
@media (max-width: 600px) {
  :root, [lang] { --serif-display: var(--serif-44); }
}
[lang=zh-Hans] { --cjk: 'Noto Serif SC'; --cjk-fallback: 'Noto Serif SC Fallback Apple', 'Noto Serif SC Fallback'; }
[lang=zh-Hant] { --cjk: 'Noto Serif TC'; --cjk-fallback: 'Noto Serif TC Fallback Apple', 'Noto Serif TC Fallback'; }
[lang=ja] { --cjk: 'Noto Serif JP'; --cjk-fallback: 'Noto Serif JP Fallback Apple', 'Noto Serif JP Fallback'; }
[lang=ko] { --cjk: 'Noto Serif KR'; --cjk-fallback: 'Noto Serif KR Fallback Apple', 'Noto Serif KR Fallback'; }