/* Generated by scripts/make-tokens.mjs from src/theme.ts — do not edit.
 *
 * The app's own tokens, for surfaces that cannot import TypeScript. Role names are
 * theme.ts's, verbatim, so there is one vocabulary rather than two that have to be
 * translated between.
 *
 * Re-run `npm run make:tokens` after changing src/theme.ts. */

:root {
  --bg: #F5EFE9;
  --bgRaised: #FCF8F4;
  --text: #1C1A16;
  --textSoft: #5E574C;
  --line: #DCD1C4;
  --lineStrong: #8E8274;
  --bgSelected: #E8DDCF;
  --link: #206D99;
  --primary: #49704E;
  --primaryText: #FCF8F4;
  --accent: #F5D547;
  --accentText: #171A1F;
  --danger: #A03828;
  --warm: #B78871;
  --warmSolid: #78523F;
  --theater: #000000;

  --read: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
  --meta: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;

  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --radius-full: 999px;

  --leading-title: 28px;
  --leading-display: 31px;
  --leading-body: 26px;
  --leading-meta: 22px;
  --leading-micro: 20px;

  --text-display: 24px;
  --text-title: 21px;
  --text-body: 17px;
  --text-ui: 15px;
  --text-meta: 13px;
  --text-micro: 11px;
  --text-tag: 10px;

  --touch-min: 44px;

  /* The wordmark beside a mark, which is the one relationship a surface outside
     the app also has — the extension's popup has the shape the top bar does.
     Only the inline size travels: the splash's stacked pair means nothing to a
     browser. (No backticks: this sits inside a template literal.) */
  --lockup-inline: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #1A1613;
    --bgRaised: #241F1A;
    --text: #E9E4DA;
    --textSoft: #A29A8B;
    --line: #352E28;
    --lineStrong: #7A7064;
    --bgSelected: #332A23;
    --link: #C9907A;
    --primary: #86B48C;
    --primaryText: #141A13;
    --accent: #C9A227;
    --accentText: #14161A;
    --danger: #DE8A72;
    --warm: #986A52;
    --warmSolid: #C29984;
    --theater: #000000;
  }
}

:root[data-theme='dark'] {
  --bg: #1A1613;
  --bgRaised: #241F1A;
  --text: #E9E4DA;
  --textSoft: #A29A8B;
  --line: #352E28;
  --lineStrong: #7A7064;
  --bgSelected: #332A23;
  --link: #C9907A;
  --primary: #86B48C;
  --primaryText: #141A13;
  --accent: #C9A227;
  --accentText: #14161A;
  --danger: #DE8A72;
  --warm: #986A52;
  --warmSolid: #C29984;
  --theater: #000000;
}