/* claude-brand — generated by tools/claude_tokens.py. Do not hand-edit.

   The ramp, the named colours, the type ramp's endpoints, the radii, the
   spacing, the measures, the easings and the durations are all carried
   verbatim from the reference's own published stylesheet. What is SOLVED here
   is which of them each role takes: every colour below is the ramp step
   nearest its limit that still clears its role's WCAG ratio against the worst
   ground in its own theme, so a secondary colour legible on the page is also
   legible in the recessed band beside it.

   Light is the palette on bare :root, because this style is paper first. An
   explicit data-theme wins over the system preference in both directions, so
   an in-page toggle is not fighting a media query. */
:root {
  color-scheme: light dark;
  --cl-paper: #faf9f5;
  --cl-raise: #ffffff;
  --cl-sink: #f0eee6;
  --cl-ink: #141413;
  --cl-ink-2: #4d4c48;
  --cl-ink-3: #5e5d59;
  --cl-stroke: #87867f;
  --cl-rule: #b0aea5;
  --cl-accent: #c6613f;
  --cl-on-accent: #141413;
  --cl-accent-text: #ad5030;
  --cl-accent-quiet: #f9f1eb;
  --cl-error: #b8463d;
  --cl-tint-oat: #e3dacc;
  --cl-tint-heather: #cbcadb;
  --cl-tint-cactus: #bcd1ca;
  --cl-tint-peach: #ebc9b7;
  --cl-on-tint: #141413;
  --cl-focus: #141413;

  /* Faces. Three of them, with the labour divided: the serif
     reads, the sans operates, the mono identifies. */
  --cl-family-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cl-family-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --cl-family-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --cl-weight-light: 300;
  --cl-weight-regular: 400;
  --cl-weight-medium: 500;
  --cl-weight-button: 480;
  --cl-weight-semibold: 600;
  --cl-weight-bold: 700;

  --cl-tracking-caps: 0.05em;
  --cl-tracking-snug: 0.01em;

  --cl-text-display-1: clamp(2.625rem, 2.0893rem + 2.6786vw, 4.5rem);
  --cl-leading-display-1: 1.1;
  --cl-text-display-2: clamp(2.25rem, 1.75rem + 2.5vw, 4rem);
  --cl-leading-display-2: 1.1;
  --cl-text-headline-1: clamp(2.125rem, 1.8036rem + 1.6071vw, 3.25rem);
  --cl-leading-headline-1: 1.2;
  --cl-text-headline-2: clamp(1.875rem, 1.625rem + 1.25vw, 2.75rem);
  --cl-leading-headline-2: 1.2;
  --cl-text-headline-3: clamp(1.75rem, 1.6071rem + 0.7143vw, 2.25rem);
  --cl-leading-headline-3: 1.3;
  --cl-text-headline-4: clamp(1.4375rem, 1.2768rem + 0.8036vw, 2rem);
  --cl-leading-headline-4: 1.1;
  --cl-text-headline-5: clamp(1.25rem, 1.1607rem + 0.4464vw, 1.5625rem);
  --cl-leading-headline-5: 1.2;
  --cl-text-headline-6: clamp(1rem, 0.9464rem + 0.2679vw, 1.1875rem);
  --cl-leading-headline-6: 1.2;
  --cl-text-body-large-1: clamp(1.375rem, 1.3393rem + 0.1786vw, 1.5rem);
  --cl-leading-body-large-1: 1.6;
  --cl-text-body-large-2: clamp(1.25rem, 1.1964rem + 0.2679vw, 1.4375rem);
  --cl-leading-body-large-2: 1.5;
  --cl-text-body-1: clamp(1.1875rem, 1.1696rem + 0.0893vw, 1.25rem);
  --cl-leading-body-1: 1.6;
  --cl-text-body-2: 1.0625rem;
  --cl-leading-body-2: 1.6;
  --cl-text-body-3: 0.9375rem;
  --cl-leading-body-3: 1.6;
  --cl-text-caption: 0.75rem;
  --cl-leading-caption: 1.6;
  --cl-text-micro: 0.625rem;
  --cl-leading-micro: 1.6;

  --cl-sp-2: 0.125rem;
  --cl-sp-4: 0.25rem;
  --cl-sp-6: 0.375rem;
  --cl-sp-8: 0.5rem;
  --cl-sp-12: 0.75rem;
  --cl-sp-16: 1rem;
  --cl-sp-20: 1.25rem;
  --cl-sp-24: 1.5rem;
  --cl-sp-32: 2rem;
  --cl-sp-40: 2.5rem;
  --cl-sp-48: 3rem;
  --cl-sp-56: 3.5rem;
  --cl-sp-64: 4rem;
  --cl-sp-80: 5rem;
  --cl-sp-96: 6rem;
  --cl-sp-128: 8rem;
  --cl-sp-200: 12.5rem;

  --cl-gap-xs: 1rem;
  --cl-gap-sm: 1.5rem;
  --cl-gap-md: 2rem;
  --cl-gap-lg: 3rem;

  --cl-margin-container: clamp(2rem, 1.4286rem + 2.8571vw, 4rem);
  --cl-section-even: clamp(3.25rem, 3.0357rem + 1.0714vw, 4rem);
  --cl-section-sm: clamp(4rem, 3.4286rem + 2.8571vw, 6rem);
  --cl-section-main: clamp(6rem, 5.4286rem + 2.8571vw, 8rem);
  --cl-section-lg: clamp(8rem, 6.7143rem + 6.4286vw, 12.5rem);

  --cl-br-2: 2px;
  --cl-br-4: 4px;
  --cl-br-6: 6px;
  --cl-br-8: 8px;
  --cl-br-12: 12px;
  --cl-br-16: 16px;
  --cl-br-24: 24px;
  --cl-br-32: 32px;
  --cl-br-48: 48px;
  --cl-br-64: 64px;
  --cl-br-pill: 999px;
  --cl-br-round: 50%;

  --cl-border-xs: 0.5px;
  --cl-border-sm: 1px;
  --cl-border-md: 1.5px;
  --cl-border-lg: 2px;

  --cl-measure-narrow: 20ch;
  --cl-measure-headline: 30ch;
  --cl-measure-title: 45ch;
  --cl-measure-body: 60ch;
  --cl-measure-wide: 70ch;
  --cl-measure-prose: 80ch;
  --cl-hold-narrow: 660px;
  --cl-hold-small: 960px;
  --cl-hold-medium: 1192px;
  --cl-hold-main: 1440px;

  --cl-ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --cl-ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --cl-ease-out-power2: cubic-bezier(.25, 1, .5, 1);
  --cl-ease-snap: cubic-bezier(.32, .72, 0, 1);
  --cl-ease-in-out-power2: cubic-bezier(.455, .03, .515, .955);
  --cl-ease-in-out-power3: cubic-bezier(.645, .045, .355, 1);
  --cl-ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --cl-ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --cl-ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --cl-dur-fast: 60ms;
  --cl-dur-base: 200ms;
  --cl-dur-slow: 450ms;

  --cl-shadow-sm: 0 2px 8px #0000000a;
  --cl-shadow-md: 0 4px 20px #0000000a;
  --cl-shadow-lg: 0 4px 16px #0000001a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cl-paper: #1a1918;
    --cl-raise: #262624;
    --cl-sink: #141413;
    --cl-ink: #faf9f5;
    --cl-ink-2: #b0aea5;
    --cl-ink-3: #9c9a92;
    --cl-stroke: #73726c;
    --cl-rule: #4d4c48;
    --cl-accent: #d97757;
    --cl-on-accent: #141413;
    --cl-accent-text: #d37151;
    --cl-accent-quiet: #221d1b;
    --cl-error: #de685d;
    --cl-tint-oat: #e3dacc;
    --cl-tint-heather: #cbcadb;
    --cl-tint-cactus: #bcd1ca;
    --cl-tint-peach: #ebc9b7;
    --cl-on-tint: #141413;
    --cl-focus: #faf9f5;
  }
}

[data-theme="dark"] {
  --cl-paper: #1a1918;
  --cl-raise: #262624;
  --cl-sink: #141413;
  --cl-ink: #faf9f5;
  --cl-ink-2: #b0aea5;
  --cl-ink-3: #9c9a92;
  --cl-stroke: #73726c;
  --cl-rule: #4d4c48;
  --cl-accent: #d97757;
  --cl-on-accent: #141413;
  --cl-accent-text: #d37151;
  --cl-accent-quiet: #221d1b;
  --cl-error: #de685d;
  --cl-tint-oat: #e3dacc;
  --cl-tint-heather: #cbcadb;
  --cl-tint-cactus: #bcd1ca;
  --cl-tint-peach: #ebc9b7;
  --cl-on-tint: #141413;
  --cl-focus: #faf9f5;
}

[data-theme="light"] {
  --cl-paper: #faf9f5;
  --cl-raise: #ffffff;
  --cl-sink: #f0eee6;
  --cl-ink: #141413;
  --cl-ink-2: #4d4c48;
  --cl-ink-3: #5e5d59;
  --cl-stroke: #87867f;
  --cl-rule: #b0aea5;
  --cl-accent: #c6613f;
  --cl-on-accent: #141413;
  --cl-accent-text: #ad5030;
  --cl-accent-quiet: #f9f1eb;
  --cl-error: #b8463d;
  --cl-tint-oat: #e3dacc;
  --cl-tint-heather: #cbcadb;
  --cl-tint-cactus: #bcd1ca;
  --cl-tint-peach: #ebc9b7;
  --cl-on-tint: #141413;
  --cl-focus: #141413;
}