/* Compound — generated by scripts/build-tokens.py from
   design-system/tokens.json. Do not hand-edit. */

:root,
[data-theme="dark"] {
  --surface: #000000;
  --surface-raised: #0f0f0f;
  --surface-sunken: #1a1a1a;
  --ink: #ffffff;
  --ink-muted: #a6a6a6;
  --ink-faint: #8c8c8c;
  --on-ink: #000000;
  --hairline: #2e2e2e;
  --border-strong: #737373;
  --focus: #ffffff;
}

[data-theme="light"] {
  --surface: #ffffff;
  --surface-raised: #f2f2f2;
  --surface-sunken: #e6e6e6;
  --ink: #000000;
  --ink-muted: #595959;
  --ink-faint: #6b6b6b;
  --on-ink: #ffffff;
  --hairline: #d4d4d4;
  --border-strong: #8c8c8c;
  --focus: #000000;
}

:root {
  /* spacing */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;
  /* radius */
  --radius-0: 0;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-full: 9999px;
  /* duration */
  --dur-instant: 90ms;
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;
  --dur-field: 1280ms;
  /* opacity */
  --op-ghost: 0.08;
  --op-trace: 0.28;
  --op-mid: 0.56;
  /* families */
  --font-grotesk: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: Newsreader, "Iowan Old Style", Georgia, serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
  /* easings — the Motion section's three curves */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Display */
.display-xl {
  font-family: var(--font-grotesk);
  font-size: 90px;
  line-height: 0.92;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.display-l {
  font-family: var(--font-grotesk);
  font-size: 64px;
  line-height: 0.94;
  font-weight: 500;
  letter-spacing: -0.03em;
}
.display-m {
  font-family: var(--font-grotesk);
  font-size: 45px;
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.display-s {
  font-family: var(--font-grotesk);
  font-size: 32px;
  line-height: 1.06;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* Text */
.body-l {
  font-family: var(--font-serif);
  font-size: 19px;
  line-height: 30px;
  font-weight: 400;
}
.body {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}
.body-s {
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}

/* Interface */
.label {
  font-family: var(--font-grotesk);
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.label-s {
  font-family: var(--font-grotesk);
  font-size: 11px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* Notation */
.metric {
  font-family: var(--font-mono);
  font-size: 45px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.mono {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
}
.mono-s {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
}