/* Generated by packages/design/build-tokens.mjs from packages/design/tokens.json. Do not edit. */

:root {
  --er-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --er-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --er-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --er-type-display-xl: 600 68px/1.04 var(--er-font-serif);
  --er-type-display-xl-size: 68px;
  --er-type-display-xl-leading: 1.04;
  --er-type-display-xl-tracking: -0.015em;
  --er-type-display-lg: 600 50px/1.1 var(--er-font-serif);
  --er-type-display-lg-size: 50px;
  --er-type-display-lg-leading: 1.1;
  --er-type-display-lg-tracking: -0.012em;
  --er-type-display-md: 600 33px/1.12 var(--er-font-serif);
  --er-type-display-md-size: 33px;
  --er-type-display-md-leading: 1.12;
  --er-type-display-md-tracking: 0;
  --er-type-display-sm: 600 28px/1.25 var(--er-font-serif);
  --er-type-display-sm-size: 28px;
  --er-type-display-sm-leading: 1.25;
  --er-type-display-sm-tracking: 0;
  --er-type-lede: 400 21px/1.6 var(--er-font-serif);
  --er-type-lede-size: 21px;
  --er-type-lede-leading: 1.6;
  --er-type-lede-tracking: 0;
  --er-type-body: 400 19px/1.65 var(--er-font-serif);
  --er-type-body-size: 19px;
  --er-type-body-leading: 1.65;
  --er-type-body-tracking: 0;
  --er-type-prose-sm: 400 16px/1.55 var(--er-font-serif);
  --er-type-prose-sm-size: 16px;
  --er-type-prose-sm-leading: 1.55;
  --er-type-prose-sm-tracking: 0;
  --er-type-ui: 400 15px/1.5 var(--er-font-sans);
  --er-type-ui-size: 15px;
  --er-type-ui-leading: 1.5;
  --er-type-ui-tracking: 0;
  --er-type-ui-sm: 400 14px/1.55 var(--er-font-sans);
  --er-type-ui-sm-size: 14px;
  --er-type-ui-sm-leading: 1.55;
  --er-type-ui-sm-tracking: 0;
  --er-type-brand: 500 13px/1.4 var(--er-font-mono);
  --er-type-brand-size: 13px;
  --er-type-brand-leading: 1.4;
  --er-type-brand-tracking: 0.2em;
  --er-type-mono: 400 12.5px/1.5 var(--er-font-mono);
  --er-type-mono-size: 12.5px;
  --er-type-mono-leading: 1.5;
  --er-type-mono-tracking: 0;
  --er-type-eyebrow: 400 12px/1.4 var(--er-font-mono);
  --er-type-eyebrow-size: 12px;
  --er-type-eyebrow-leading: 1.4;
  --er-type-eyebrow-tracking: 0.16em;
  --er-type-label: 400 11.5px/1.4 var(--er-font-mono);
  --er-type-label-size: 11.5px;
  --er-type-label-leading: 1.4;
  --er-type-label-tracking: 0.08em;
  --er-space-1: 4px;
  --er-space-2: 8px;
  --er-space-3: 12px;
  --er-space-4: 16px;
  --er-space-5: 20px;
  --er-space-6: 24px;
  --er-space-7: 32px;
  --er-space-8: 40px;
  --er-space-9: 48px;
  --er-space-10: 56px;
  --er-space-11: 64px;
  --er-space-12: 72px;
  --er-space-13: 96px;
  --er-radius-none: 0;
  --er-radius-pill: 999px;
  --er-page: 1120px;
  --er-measure: 680px;
  --er-figure: 960px;
  --er-gutter: 32px;
  --er-gutter-phone: 20px;
  --er-touch: 44px;
  --er-hairline: 1px;
}

/* paper: the default, and an explicit data-theme="paper". */
:root,
:root[data-theme="paper"] {
  color-scheme: light;
  --er-bg: #F4F2EC;
  --er-surface: #FBFAF6;
  --er-selected: #E9E5DA;
  --er-ink: #24262A;
  --er-strong: #111214;
  --er-muted: #595D65;
  --er-rule: #D9D5CB;
  --er-accent: #1F4E8C;
  --er-live: #2E7D4F;
  --er-warn: #8A5A00;
  --er-s1: #1F4E8C;
  --er-s2: #B4531A;
  --er-s3: #6B7078;
  --er-s4: #7C80E2;
  --er-s5: #3E5D14;
  --er-s6: #C06099;
  --er-s7: #902047;
  --er-s8: #8B8C1F;
}

/* No stored choice (no valid data-theme): follow the system preference. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="paper"]):not([data-theme="ink"]) {
    color-scheme: dark;
    --er-bg: #111214;
    --er-surface: #17191C;
    --er-selected: #1E2125;
    --er-ink: #DEDCD6;
    --er-strong: #F5F4F1;
    --er-muted: #9A9EA6;
    --er-rule: #2A2D32;
    --er-accent: #8DB4F0;
    --er-live: #7BD3A0;
    --er-warn: #E8C26B;
    --er-s1: #8DB4F0;
    --er-s2: #F0A35E;
    --er-s3: #A3A8B0;
    --er-s4: #7679DE;
    --er-s5: #407A0F;
    --er-s6: #CD6AAF;
    --er-s7: #9C4B60;
    --er-s8: #98991E;
  }
}

/* ink: an explicit data-theme="ink" (the toggle's stored choice). */
:root[data-theme="ink"] {
  color-scheme: dark;
  --er-bg: #111214;
  --er-surface: #17191C;
  --er-selected: #1E2125;
  --er-ink: #DEDCD6;
  --er-strong: #F5F4F1;
  --er-muted: #9A9EA6;
  --er-rule: #2A2D32;
  --er-accent: #8DB4F0;
  --er-live: #7BD3A0;
  --er-warn: #E8C26B;
  --er-s1: #8DB4F0;
  --er-s2: #F0A35E;
  --er-s3: #A3A8B0;
  --er-s4: #7679DE;
  --er-s5: #407A0F;
  --er-s6: #CD6AAF;
  --er-s7: #9C4B60;
  --er-s8: #98991E;
}