/* Generated by design/build.mjs from design/tokens.json. Do not edit. */
:root, [data-surface="paper"] {
  --color-page: #f1f1ec;
  --color-surface: #fbfbf8;
  --color-text: #121211;
  --color-muted: #55554f;
  --color-rule: #c9c9c2;
  --color-inverse: #121211;
  --color-inverse-text: #fbfbf8;
  --color-focus: #121211;
  --color-danger: #c8102e;
  --color-you: #ff3d7f;
  --color-you-text: #3d0016;
}
[data-surface="belt"] {
  --color-page: #0e0e0d;
  --color-surface: #0e0e0d;
  --color-text: #f4f4f1;
  --color-muted: #a9a9a3;
  --color-rule: #3a3a37;
  --color-inverse: #f4f4f1;
  --color-inverse-text: #0e0e0d;
  --color-focus: #f4f4f1;
  --color-danger: #ff6b81;
  --color-you: #ff3d7f;
  --color-you-text: #3d0016;
}
:root {
  --font-computed: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-written: 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type-display: 800 clamp(2.25rem, 1.5341rem + 3.182vw, 4rem)/1.04 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type-display-stretch: 100%;
  --type-display-tracking: -0.035em;
  --type-display-case: none;
  --type-title: 800 clamp(1.5rem, 1.2443rem + 1.136vw, 2.125rem)/1.15 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type-title-stretch: 100%;
  --type-title-tracking: -0.025em;
  --type-title-case: none;
  --type-heading: 800 0.875rem/1.3 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --type-heading-stretch: 100%;
  --type-heading-tracking: 0.04em;
  --type-heading-case: uppercase;
  --type-figure: 800 2.5rem/1 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --type-figure-stretch: 112.5%;
  --type-figure-tracking: -0.04em;
  --type-figure-case: none;
  --type-data: 400 0.875rem/1.55 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --type-data-stretch: 87.5%;
  --type-data-tracking: 0em;
  --type-data-case: none;
  --type-label: 700 0.75rem/1.4 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --type-label-stretch: 87.5%;
  --type-label-tracking: 0.06em;
  --type-label-case: uppercase;
  --type-action: 700 0.875rem/1.2 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --type-action-stretch: 87.5%;
  --type-action-tracking: 0.02em;
  --type-action-case: uppercase;
  --type-body: 400 1.0625rem/1.6 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type-body-stretch: 100%;
  --type-body-tracking: 0em;
  --type-body-case: none;
  --type-small: 400 0.875rem/1.5 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --type-small-stretch: 100%;
  --type-small-tracking: 0em;
  --type-small-case: none;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --rule-thin: 1px;
  --rule-thick: 2px;
  --size-tap: 44px;
  --layout-page: 1240px;
  --layout-prose: 64ch;
  --layout-fluid-from: 360px;
  --layout-fluid-to: 1240px;
  --motion-fast: 150ms;
  --motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.type-display { font: var(--type-display); font-stretch: var(--type-display-stretch); letter-spacing: var(--type-display-tracking); text-transform: var(--type-display-case); }
.type-title { font: var(--type-title); font-stretch: var(--type-title-stretch); letter-spacing: var(--type-title-tracking); text-transform: var(--type-title-case); }
.type-heading { font: var(--type-heading); font-stretch: var(--type-heading-stretch); letter-spacing: var(--type-heading-tracking); text-transform: var(--type-heading-case); }
.type-figure { font: var(--type-figure); font-stretch: var(--type-figure-stretch); letter-spacing: var(--type-figure-tracking); text-transform: var(--type-figure-case); }
.type-data { font: var(--type-data); font-stretch: var(--type-data-stretch); letter-spacing: var(--type-data-tracking); text-transform: var(--type-data-case); }
.type-label { font: var(--type-label); font-stretch: var(--type-label-stretch); letter-spacing: var(--type-label-tracking); text-transform: var(--type-label-case); }
.type-action { font: var(--type-action); font-stretch: var(--type-action-stretch); letter-spacing: var(--type-action-tracking); text-transform: var(--type-action-case); }
.type-body { font: var(--type-body); font-stretch: var(--type-body-stretch); letter-spacing: var(--type-body-tracking); text-transform: var(--type-body-case); }
.type-small { font: var(--type-small); font-stretch: var(--type-small-stretch); letter-spacing: var(--type-small-tracking); text-transform: var(--type-small-case); }