/* Generated from design-system/tokens.json by `hub sync-design`. */
@font-face { font-family: "STIX Two Text"; src: url(fonts/STIXTwoText-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url(fonts/STIXTwoText-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "STIX Two Text"; src: url(fonts/STIXTwoText-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-Italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(fonts/IBMPlexSans-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/IBMPlexMono-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/IBMPlexMono-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/IBMPlexMono-SemiBold.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root, [data-theme="light"] {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f4f6;
  --ink: #0b0f14;
  --ink-2: #464d57;
  --ink-3: #5c646e;
  --on-ink: #ffffff;
  --line: #dfe3e8;
  --line-2: #eceff2;
  --mark: #ffe14d;
  --mark-ink: #0b0f14;
  --mark-soft: #fffbe0;
  --open: #136f37;
  --open-soft: #e4f5ea;
  --auth: #9a5b06;
  --auth-soft: #fcf0d2;
  --bad: #b42323;
  --bad-soft: #fde3e3;
  --shadow-stamp: 4px 4px 0 #0b0f14;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #0b0f14;
  --rule: #0b0f14;
  --link: #0b0f14;
  --font-serif: "STIX Two Text", "STIX Two Math", "Cambria Math", "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --radius-0: 0px;
  --page-width: 1120px;
  --header-height: 52px;
  --control-height: 34px;
  --control-height-sm: 28px;
  --glyph: 7px;
  --measure: 62ch;
  --rule-weight: 1px;
  --hair-weight: 1px;
}
[data-theme="dark"] {
  --canvas: #0b0f14;
  --surface: #0f141a;
  --surface-2: #151a21;
  --ink: #eef0f3;
  --ink-2: #b3bbc5;
  --ink-3: #8a93a0;
  --on-ink: #0b0f14;
  --line: #2b323c;
  --line-2: #1c222a;
  --mark: #f5d33a;
  --mark-ink: #0b0f14;
  --mark-soft: #2a2510;
  --open: #4ade80;
  --open-soft: #10321e;
  --auth: #fbbf24;
  --auth-soft: #3a2b06;
  --bad: #f87171;
  --bad-soft: #3d1515;
  --shadow-stamp: 4px 4px 0 #2b323c;
  --focus-ring: 0 0 0 2px #0b0f14, 0 0 0 4px #eef0f3;
  --rule: #eef0f3;
  --link: #eef0f3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0b0f14;
    --surface: #0f141a;
    --surface-2: #151a21;
    --ink: #eef0f3;
    --ink-2: #b3bbc5;
    --ink-3: #8a93a0;
    --on-ink: #0b0f14;
    --line: #2b323c;
    --line-2: #1c222a;
    --mark: #f5d33a;
    --mark-ink: #0b0f14;
    --mark-soft: #2a2510;
    --open: #4ade80;
    --open-soft: #10321e;
    --auth: #fbbf24;
    --auth-soft: #3a2b06;
    --bad: #f87171;
    --bad-soft: #3d1515;
    --shadow-stamp: 4px 4px 0 #2b323c;
    --focus-ring: 0 0 0 2px #0b0f14, 0 0 0 4px #eef0f3;
    --rule: #eef0f3;
    --link: #eef0f3;
  }
}

.t-display { font-family: var(--font-serif); font-size: 46px; line-height: 48px; font-weight: 400; letter-spacing: -0.01em; }
.t-title { font-family: var(--font-serif); font-size: 38px; line-height: 40px; font-weight: 400; letter-spacing: -0.005em; }
.t-mark { font-family: var(--font-serif); font-size: 26px; line-height: 26px; font-weight: 400; }
.t-lead { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: 14.5px; line-height: 22px; font-weight: 400; }
.t-name { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.t-control { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.t-small { font-family: var(--font-sans); font-size: 13.5px; line-height: 20px; font-weight: 400; }
.t-caption { font-family: var(--font-sans); font-size: 12.5px; line-height: 16px; font-weight: 400; }
.t-figure { font-family: var(--font-mono); font-size: 26px; line-height: 28px; font-weight: 500; }
.t-data { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; }
.t-data-strong { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; }
.t-label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.t-tag { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.t-kbd { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 400; }