/* Generated by scripts/site-tokens.mjs from src/styles/tokens.css — do not edit.
   Run `npm run site:tokens`; `tests/site.mjs` fails when this is stale.

   The page and a screenshot of the program have to agree, in both faces and in
   how everything moves, so the values are the app's own and are copied rather
   than restated. The glass family lives on `body` in the app because a material
   is swapped there; the site has one material, so it is all one face here. */
:root {
  --bg: #f5f4f1;
  --surface: #ffffff;
  --surface-alt: #eeece6;
  --surface-raised: #ffffff;
  --border: #dedad0;
  --border-soft: #e8e5dd;
  --text: #1c2024;
  --text-muted: color-mix(in srgb, var(--text) 80%, var(--bg));
  --text-faint: color-mix(in srgb, var(--text) 55%, var(--bg));
  --accent: #2b4a6f;
  --accent-hover: #213a58;
  --accent-soft: #e2eaf3;
  --accent-contrast: #f7fafc;
  --math-accent: #3f7a6b;
  --math-soft: #e3efec;
  --danger: #a4453a;
  --ok: #3f7a52;
  --warn: #b4842b;
  --chrome-top: 96px;
  --chrome-row: 48px;
  --chrome-sub: rgba(0, 0, 0, 0.13);
  --chrome-sub-cast: inset 0 7px 9px -7px rgba(0, 0, 0, 0.45);
  --tab-bar-h: 33px;
  --rail-top: calc(var(--chrome-top) + 8px);
  --panel-top: var(--chrome-top);
  --chrome-bottom: 28px;
  --shadow-sm: 0 1px 2px rgba(28, 32, 36, 0.06);
  --shadow-md: 0 4px 16px rgba(28, 32, 36, 0.08);
  --shadow-lg: 0 8px 24px rgba(28, 32, 36, 0.1), 0 32px 64px -16px rgba(28, 32, 36, 0.22);
  --paper: #ffffff;
  --paper-edge: rgba(28, 32, 36, 0.08);
  --page-h: 1123px;
  --page-rule: rgba(28, 32, 36, 0.1);
  --page-gutter-shade: rgba(28, 32, 36, 0.2);
  --page-gutter-line: rgba(28, 32, 36, 0.12);
  --paper-shadow: 0 1px 2px rgba(28, 32, 36, 0.04), 0 12px 32px -8px rgba(28, 32, 36, 0.14);
  --scrollbar: rgba(28, 32, 36, 0.16);
  --scrollbar-hover: rgba(28, 32, 36, 0.3);
  --selection: color-mix(in srgb, #2b4a6f 22%, transparent);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-control: var(--radius-sm);
  --focus-ring: 0 0 0 0.5px var(--accent-soft);
  --radius-lg: 14px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Heebo, Assistant, "Noto Sans Hebrew", Arial, sans-serif;
  --font-body-en: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-body-he: "Frank Ruhl Libre", "Frank Ruehl CLM", "Noto Serif Hebrew", "David CLM", David, "New Peninim MT", "Arial Hebrew", serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --dur-instant: 0.09s;
  --dur-fast: 0.14s;
  --dur-base: 0.19s;
  --dur-slow: 0.26s;
  --ease-out: cubic-bezier(0.22, 0.7, 0.3, 1);
  --ease-in: cubic-bezier(0.45, 0, 0.9, 0.55);
  --ease-spring: cubic-bezier(0.34, 1.35, 0.5, 1);
  --glass: color-mix(in srgb, var(--surface-raised) 86%, var(--accent));
  --glass-blur: 14px;
  --glass-saturate: 140%;
  --glass-rim: color-mix(in srgb, #fff 30%, transparent);
  --glass-lip: color-mix(in srgb, #fff 45%, transparent);
  --glass-foot: color-mix(in srgb, var(--text) 6%, transparent);
  --glass-sheen: linear-gradient( to bottom, color-mix(in srgb, #fff 9%, transparent) 0%, transparent 42% );
  --glass-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  --glass-shadow: 0 1px 2px rgba(28, 32, 36, 0.06), 0 24px 52px rgba(28, 32, 36, 0.18);
  --glass-hover: color-mix(in srgb, var(--text) 8%, transparent);
  --panel-solid: color-mix(in srgb, var(--glass) 90%, var(--bg));
  --glass-on: color-mix(in srgb, var(--accent) 16%, transparent);
  --glass-edge: color-mix(in srgb, var(--text) 10%, transparent);
  --control-hover: var(--glass-hover);
  --control-hover-strong: var(--glass-on);
  --field-bg: color-mix(in srgb, var(--text) 5%, transparent);
  --field-edge: color-mix(in srgb, var(--text) 11%, transparent);
  --glass-body: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 22%, transparent), color-mix(in srgb, var(--glass) 13%, transparent) );
  --glass-body-chrome: linear-gradient( to bottom, color-mix(in srgb, color-mix(in srgb, var(--glass) 44%, var(--paper)) 94%, transparent), color-mix(in srgb, color-mix(in srgb, var(--glass) 33%, var(--paper)) 86%, transparent) );
  --glass-body-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 80%, var(--paper)), color-mix(in srgb, var(--glass) 70%, var(--paper)) );
  --glass-body-reading: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 80%, transparent), color-mix(in srgb, var(--glass) 70%, transparent) );
  --glass-body-chrome-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 86%, var(--paper)), color-mix(in srgb, var(--glass) 78%, var(--paper)) );
  --glass-body-reading-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 90%, var(--paper)), color-mix(in srgb, var(--glass) 82%, var(--paper)) );
  /* The site's own, which the app has no need of: the measure of a column of
     prose, and the face the front page sets its paragraphs in. */
  --wrap: 1080px;
  --font-body: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

/* **The face the reader chose, and the one their system asks for.** The button
   stamps `data-theme`; with nothing stamped the system decides, which is the
   three-state rule every page in this project follows. */
[data-theme="dark"] {
  --bg: #14171b;
  --surface: #1b1f24;
  --surface-alt: #20252b;
  --surface-raised: #242a31;
  --border: #2c323a;
  --border-soft: #262c33;
  --text: #e7e7e4;
  --text-muted: color-mix(in srgb, var(--text) 80%, var(--bg));
  --text-faint: color-mix(in srgb, var(--text) 55%, var(--bg));
  --accent: #7ca7d1;
  --accent-hover: #94b9dd;
  --accent-soft: #22344a;
  --accent-contrast: #0e1620;
  --math-accent: #6fbfa9;
  --math-soft: #1c332e;
  --danger: #d98177;
  --ok: #79c396;
  --warn: #d9b271;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 40px 80px -20px rgba(0, 0, 0, 0.6);
  --paper: #1e2329;
  --paper-edge: rgba(255, 255, 255, 0.06);
  --page-rule: rgba(255, 255, 255, 0.09);
  --page-gutter-shade: rgba(0, 0, 0, 0.55);
  --page-gutter-line: rgba(255, 255, 255, 0.07);
  --paper-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
  --scrollbar: rgba(255, 255, 255, 0.14);
  --scrollbar-hover: rgba(255, 255, 255, 0.26);
  --selection: color-mix(in srgb, #7ea6d4 30%, transparent);
  --glass: color-mix(in srgb, var(--surface-raised) 88%, var(--accent));
  --glass-rim: color-mix(in srgb, #fff 14%, transparent);
  --glass-lip: color-mix(in srgb, #fff 9%, transparent);
  --glass-foot: rgba(0, 0, 0, 0.35);
  --glass-sheen: linear-gradient(to bottom, color-mix(in srgb, #fff 5%, transparent) 0%, transparent 42%);
  --glass-shadow: 0 24px 52px rgba(0, 0, 0, 0.5);
  --glass-hover: color-mix(in srgb, #fff 11%, transparent);
  --panel-solid: color-mix(in srgb, var(--glass) 86%, var(--bg));
  --glass-on: color-mix(in srgb, var(--accent) 30%, transparent);
  --field-bg: color-mix(in srgb, #fff 6%, transparent);
  --field-edge: color-mix(in srgb, #fff 9%, transparent);
  --glass-edge: color-mix(in srgb, #fff 12%, transparent);
  --glass-body: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 29%, transparent), color-mix(in srgb, var(--glass) 20%, transparent) );
  --glass-body-chrome: linear-gradient( to bottom, color-mix(in srgb, color-mix(in srgb, var(--glass) 50%, var(--paper)) 94%, transparent), color-mix(in srgb, color-mix(in srgb, var(--glass) 38%, var(--paper)) 86%, transparent) );
  --glass-body-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 83%, var(--paper)), color-mix(in srgb, var(--glass) 73%, var(--paper)) );
  --glass-body-reading: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 83%, transparent), color-mix(in srgb, var(--glass) 73%, transparent) );
  --glass-body-chrome-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 89%, var(--paper)), color-mix(in srgb, var(--glass) 81%, var(--paper)) );
  --glass-body-reading-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 93%, var(--paper)), color-mix(in srgb, var(--glass) 85%, var(--paper)) );
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171b;
    --surface: #1b1f24;
    --surface-alt: #20252b;
    --surface-raised: #242a31;
    --border: #2c323a;
    --border-soft: #262c33;
    --text: #e7e7e4;
    --text-muted: color-mix(in srgb, var(--text) 80%, var(--bg));
    --text-faint: color-mix(in srgb, var(--text) 55%, var(--bg));
    --accent: #7ca7d1;
    --accent-hover: #94b9dd;
    --accent-soft: #22344a;
    --accent-contrast: #0e1620;
    --math-accent: #6fbfa9;
    --math-soft: #1c332e;
    --danger: #d98177;
    --ok: #79c396;
    --warn: #d9b271;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45), 0 40px 80px -20px rgba(0, 0, 0, 0.6);
    --paper: #1e2329;
    --paper-edge: rgba(255, 255, 255, 0.06);
    --page-rule: rgba(255, 255, 255, 0.09);
    --page-gutter-shade: rgba(0, 0, 0, 0.55);
    --page-gutter-line: rgba(255, 255, 255, 0.07);
    --paper-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 40px -12px rgba(0, 0, 0, 0.6);
    --scrollbar: rgba(255, 255, 255, 0.14);
    --scrollbar-hover: rgba(255, 255, 255, 0.26);
    --selection: color-mix(in srgb, #7ea6d4 30%, transparent);
    --glass: color-mix(in srgb, var(--surface-raised) 88%, var(--accent));
    --glass-rim: color-mix(in srgb, #fff 14%, transparent);
    --glass-lip: color-mix(in srgb, #fff 9%, transparent);
    --glass-foot: rgba(0, 0, 0, 0.35);
    --glass-sheen: linear-gradient(to bottom, color-mix(in srgb, #fff 5%, transparent) 0%, transparent 42%);
    --glass-shadow: 0 24px 52px rgba(0, 0, 0, 0.5);
    --glass-hover: color-mix(in srgb, #fff 11%, transparent);
    --panel-solid: color-mix(in srgb, var(--glass) 86%, var(--bg));
    --glass-on: color-mix(in srgb, var(--accent) 30%, transparent);
    --field-bg: color-mix(in srgb, #fff 6%, transparent);
    --field-edge: color-mix(in srgb, #fff 9%, transparent);
    --glass-edge: color-mix(in srgb, #fff 12%, transparent);
    --glass-body: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 29%, transparent), color-mix(in srgb, var(--glass) 20%, transparent) );
    --glass-body-chrome: linear-gradient( to bottom, color-mix(in srgb, color-mix(in srgb, var(--glass) 50%, var(--paper)) 94%, transparent), color-mix(in srgb, color-mix(in srgb, var(--glass) 38%, var(--paper)) 86%, transparent) );
    --glass-body-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 83%, var(--paper)), color-mix(in srgb, var(--glass) 73%, var(--paper)) );
    --glass-body-reading: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 83%, transparent), color-mix(in srgb, var(--glass) 73%, transparent) );
    --glass-body-chrome-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 89%, var(--paper)), color-mix(in srgb, var(--glass) 81%, var(--paper)) );
    --glass-body-reading-solid: linear-gradient( to bottom, color-mix(in srgb, var(--glass) 93%, var(--paper)), color-mix(in srgb, var(--glass) 85%, var(--paper)) );
  }
}