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

:root,
[data-theme="light"] {
  color-scheme: light;
  --ground: var(--white);
  --ground-alt: var(--paper);
  --raised: var(--white);
  --sunken: var(--graphite-50);
  --ground-inverse: var(--ink);
  --fg: var(--ink-text);
  --fg-muted: var(--graphite-600);
  --fg-disabled: var(--graphite-400);
  --fg-inverse: var(--graphite-50);
  --line: var(--graphite-200);
  --line-strong: var(--graphite-500);
  --brand: var(--primary-400);
  --brand-hover: var(--primary-500);
  --on-brand: var(--ink);
  --brand-text: var(--primary-700);
  --brand-tint: var(--primary-50);
  --brand-line: var(--primary-200);
  --tag: var(--primary-100);
  --live: var(--voltage);
  --on-live: var(--ink);
  --live-text: var(--primary-700);
  --danger: var(--error);
  --on-danger: var(--ink);
  --danger-text: var(--red-700);
  --danger-tint: var(--red-50);
  --warning: var(--amber-300);
  --on-warning: var(--ink);
  --warning-text: var(--amber-800);
  --warning-tint: var(--amber-50);
  --focus: var(--primary-700);
  --primary-50: #f0fbe9;
  --primary-100: #ddf5cf;
  --primary-200: #bdeaa5;
  --primary-300: #93db6f;
  --primary-400: #69bd45;
  --primary-500: #52a633;
  --primary-600: #3d8425;
  --primary-700: #316520;
  --primary-800: #2b511e;
  --primary-950: #10250b;
  --voltage: #c7f94b;
  --ink: #030712;
  --ink-text: #14171a;
  --paper: #faf8f2;
  --white: #ffffff;
  --graphite-50: #f6f7f8;
  --graphite-100: #eceef1;
  --graphite-200: #d7dbe0;
  --graphite-300: #b3bac4;
  --graphite-400: #8b94a3;
  --graphite-500: #6a7382;
  --graphite-600: #525a68;
  --graphite-700: #414751;
  --graphite-800: #2a2f37;
  --graphite-900: #191d23;
  --error: #e25950;
  --red-50: #fef2f2;
  --red-700: #bf000f;
  --amber-50: #fffbeb;
  --amber-300: #ffd236;
  --amber-800: #953d00;
  --shadow-float: 0 1px 2px #0307120f, 0 12px 32px -12px #03071240;
  --shadow-voltage: none;
}

[data-theme="dark"] {
  color-scheme: dark;
  --ground: var(--ink);
  --ground-alt: var(--graphite-900);
  --raised: var(--graphite-900);
  --sunken: var(--ink);
  --ground-inverse: var(--paper);
  --fg: var(--graphite-50);
  --fg-muted: var(--graphite-300);
  --fg-disabled: var(--graphite-600);
  --fg-inverse: var(--ink-text);
  --line: var(--graphite-800);
  --line-strong: var(--graphite-500);
  --brand-text: var(--primary-300);
  --brand-tint: var(--primary-950);
  --brand-line: var(--primary-800);
  --tag: var(--primary-950);
  --live-text: var(--voltage);
  --danger-text: var(--error);
  --danger-tint: #e2595024;
  --warning-text: var(--amber-300);
  --warning-tint: #ffd2361f;
  --focus: var(--voltage);
  --shadow-float: 0 1px 2px #00000066, 0 16px 40px -12px #000000b3;
  --shadow-voltage: 0 0 0 1px #c7f94b80, 0 0 24px -4px #c7f94b99;
}

:root {
  --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-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;
  --cut-sm: 12px;
  --cut-md: 20px;
  --cut-lg: 32px;
  --container: 1200px;
  --container-narrow: 760px;
  --measure: 66ch;
  --gutter: 16px;
  --gutter-wide: 40px;
  --font-display: "Jost", "Century Gothic", "Futura", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

@font-face {
  font-family: "Jost";
  src: url("fonts/Jost-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/AtkinsonHyperlegibleNext-Italic-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("fonts/AtkinsonHyperlegibleMono-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.display-xl {
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.display-lg {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.heading-1 {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.heading-2 {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.heading-3 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.heading-4 {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: 0;
}

.lede {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 31px;
  font-weight: 400;
}

.body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 27px;
  font-weight: 400;
}

.body-strong {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 27px;
  font-weight: 700;
}

.body-sm {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 23px;
  font-weight: 400;
}

.label {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
}

.caption {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.serial {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.ledger {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0.01em;
}