/* Generated from tokens.json by brand/tools/tokens.py. Do not edit by hand. */

:root {
  --color-paper: #F4F1EA;
  --color-surface: #FFFFFF;
  --color-ink: #12181C;
  --color-muted: #4A555C;
  --color-line: #2B3A44;
  --color-hairline: rgb(18 24 28 / 0.12);
  --color-accent: #0F6B6B;
  --color-accent-soft: rgb(15 107 107 / 0.10);
  --color-amber: #E0A04A;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-display: clamp(3rem, 2.275rem + 3.094vw, 4.75rem);
  --text-display-lh: 1.0;
  --text-display-weight: 500;
  --text-display-tracking: -0.025em;
  --text-h1: clamp(2.375rem, 2.012rem + 1.547vw, 3.25rem);
  --text-h1-lh: 1.05;
  --text-h1-weight: 500;
  --text-h1-tracking: -0.02em;
  --text-h2: clamp(1.812rem, 1.579rem + 0.9945vw, 2.375rem);
  --text-h2-lh: 1.1;
  --text-h2-weight: 500;
  --text-h2-tracking: -0.015em;
  --text-h3: clamp(1.375rem, 1.246rem + 0.5525vw, 1.688rem);
  --text-h3-lh: 1.2;
  --text-h3-weight: 500;
  --text-h3-tracking: -0.01em;
  --text-h4: clamp(1.125rem, 1.073rem + 0.221vw, 1.25rem);
  --text-h4-lh: 1.3;
  --text-h4-weight: 600;
  --text-h4-tracking: 0;
  --text-lead: clamp(1.125rem, 1.073rem + 0.221vw, 1.25rem);
  --text-lead-lh: 1.5;
  --text-lead-weight: 400;
  --text-lead-tracking: 0;
  --text-body: clamp(1rem, 0.9741rem + 0.1105vw, 1.062rem);
  --text-body-lh: 1.65;
  --text-body-weight: 400;
  --text-body-tracking: 0;
  --text-small: clamp(0.875rem, 0.8621rem + 0.05525vw, 0.9062rem);
  --text-small-lh: 1.5;
  --text-small-weight: 400;
  --text-small-tracking: 0;
  --text-label: clamp(0.75rem, 0.7371rem + 0.05525vw, 0.7812rem);
  --text-label-lh: 1.4;
  --text-label-weight: 500;
  --text-label-tracking: 0.08em;
  --text-data: clamp(0.7812rem, 0.7683rem + 0.05525vw, 0.8125rem);
  --text-data-lh: 1.5;
  --text-data-weight: 400;
  --text-data-tracking: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --measure: 66ch;
  --page-max: 1200px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #1F1E1C;
    --color-surface: #2A2926;
    --color-ink: #ECE9E2;
    --color-muted: #A29E95;
    --color-line: #7D8F8B;
    --color-hairline: rgb(236 233 226 / 0.12);
    --color-accent: #5CBFB8;
    --color-accent-soft: rgb(92 191 184 / 0.12);
    --color-amber: #E0A04A;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-paper: #1F1E1C;
  --color-surface: #2A2926;
  --color-ink: #ECE9E2;
  --color-muted: #A29E95;
  --color-line: #7D8F8B;
  --color-hairline: rgb(236 233 226 / 0.12);
  --color-accent: #5CBFB8;
  --color-accent-soft: rgb(92 191 184 / 0.12);
  --color-amber: #E0A04A;
  color-scheme: dark;
}

/* Type steps. Fraunces always runs with SOFT and optical sizing on. */
.t-display { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--text-display-lh); font-weight: var(--text-display-weight); letter-spacing: var(--text-display-tracking); font-optical-sizing: auto; font-variation-settings: "SOFT" 50, "WONK" 0; text-wrap: balance; }
.t-h1 { font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--text-h1-lh); font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-tracking); font-optical-sizing: auto; font-variation-settings: "SOFT" 50, "WONK" 0; text-wrap: balance; }
.t-h2 { font-family: var(--font-display); font-size: var(--text-h2); line-height: var(--text-h2-lh); font-weight: var(--text-h2-weight); letter-spacing: var(--text-h2-tracking); font-optical-sizing: auto; font-variation-settings: "SOFT" 50, "WONK" 0; text-wrap: balance; }
.t-h3 { font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--text-h3-lh); font-weight: var(--text-h3-weight); letter-spacing: var(--text-h3-tracking); font-optical-sizing: auto; font-variation-settings: "SOFT" 50, "WONK" 0; text-wrap: balance; }
.t-h4 { font-family: var(--font-text); font-size: var(--text-h4); line-height: var(--text-h4-lh); font-weight: var(--text-h4-weight); letter-spacing: var(--text-h4-tracking); }
.t-lead { font-family: var(--font-text); font-size: var(--text-lead); line-height: var(--text-lead-lh); font-weight: var(--text-lead-weight); letter-spacing: var(--text-lead-tracking); color: var(--color-muted); }
.t-body { font-family: var(--font-text); font-size: var(--text-body); line-height: var(--text-body-lh); font-weight: var(--text-body-weight); letter-spacing: var(--text-body-tracking); max-width: var(--measure); }
.t-small { font-family: var(--font-text); font-size: var(--text-small); line-height: var(--text-small-lh); font-weight: var(--text-small-weight); letter-spacing: var(--text-small-tracking); color: var(--color-muted); }
.t-label { font-family: var(--font-mono); font-size: var(--text-label); line-height: var(--text-label-lh); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-tracking); text-transform: uppercase; }
.t-data { font-family: var(--font-mono); font-size: var(--text-data); line-height: var(--text-data-lh); font-weight: var(--text-data-weight); letter-spacing: var(--text-data-tracking); font-variant-numeric: tabular-nums; }