/* Generated by the design-tokens build from tokens/*.tokens.json. Do not edit. */
:root {
  color-scheme: light dark;
  --color-cream-50: #fbf3e4;
  --color-cream-100: #f4e8d4;
  --color-cream-200: #ead7b7;
  --color-cream-300: #d4b896;
  --color-brown-400: #74523c;
  --color-brown-500: #6e4d37;
  --color-brown-900: #3b2416;
  --color-orange-500: #b84616;
  --color-orange-600: #a03f12;
  --color-mustard-500: #d99a2b;
  --color-espresso-700: #5a3d1a;
  --color-espresso-800: #40290f;
  --color-espresso-900: #2b1d0e;
  --color-gold-200: #f6ecd2;
  --color-gold-400: #b89b6a;
  --color-gold-500: #e3a03a;
  --color-gold-600: #c9892a;
  --color-olive-100: #e0d7bc;
  --color-olive-300: #b5c26a;
  --color-olive-700: #566319;
  --color-olive-900: #3e341b;
  --color-teal-100: #dad8c6;
  --color-teal-300: #7cc4b8;
  --color-teal-700: #1f6560;
  --color-teal-900: #363426;
  --color-plum-300: #e69ab8;
  --color-plum-700: #85385a;
  --color-amber-300: #e8b86a;
  --color-amber-700: #7a4d0c;
  --color-red-100: #e2c6a8;
  --color-red-300: #f0927f;
  --color-red-700: #9b2a1c;
  --color-red-900: #59381f;
  --color-yellow-100: #f3dcac;
  --color-yellow-300: #ffc233;
  --color-yellow-500: #f2b01e;
  --color-yellow-700: #7a5800;
  --color-yellow-900: #4d3714;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-9: 36px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  --font-family-zilla-slab: "Zilla Slab", Rockwell, serif;
  --font-family-atkinson: "Atkinson Hyperlegible", "Helvetica Neue", Arial, sans-serif;
  --font-family-jetbrains-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.5rem;
  --font-size-5xl: 3.25rem;
  --motion-duration-fast: 100ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 350ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --pad-control: var(--space-3);
  --pad-card: var(--space-6);
  --pad-page: var(--space-4);
  --pad-tag: var(--space-2);
  --pad-region: var(--space-24);
  --gap-tight: var(--space-2);
  --gap-inline: var(--space-4);
  --gap-stack: var(--space-4);
  --gap-section: var(--space-8);
  --gap-region: var(--space-12);
  --layout-content-width: 90rem;
  --layout-measure: 42rem;
  --layout-page-width: 75rem;
  --layout-sidebar-width: 15rem;
  --layout-column-width: 12rem;
  --shape-control: var(--radius-md);
  --shape-card: var(--radius-lg);
  --shape-tag: var(--radius-lg);
  --shape-round: var(--radius-full);
  --size-dot: var(--space-2);
  --size-marker: var(--space-9);
  --border-width-default: 1px;
  --text-heading: var(--font-family-zilla-slab);
  --text-body: var(--font-family-atkinson);
  --text-code: var(--font-family-jetbrains-mono);
  --type-display-font-family: var(--text-heading);
  --type-display-font-size: var(--font-size-5xl);
  --type-display-font-weight: var(--font-weight-bold);
  --type-display-line-height: 1.05;
  --type-display-letter-spacing: -1px;
  --type-headline-font-family: var(--text-heading);
  --type-headline-font-size: var(--font-size-4xl);
  --type-headline-font-weight: var(--font-weight-bold);
  --type-headline-line-height: 1.1;
  --type-headline-letter-spacing: -0.5px;
  --type-title-lg-font-family: var(--text-heading);
  --type-title-lg-font-size: var(--font-size-3xl);
  --type-title-lg-font-weight: var(--font-weight-bold);
  --type-title-lg-line-height: 1.2;
  --type-title-lg-letter-spacing: 0px;
  --type-title-md-font-family: var(--text-heading);
  --type-title-md-font-size: var(--font-size-2xl);
  --type-title-md-font-weight: var(--font-weight-bold);
  --type-title-md-line-height: 1.25;
  --type-title-md-letter-spacing: 0px;
  --type-title-sm-font-family: var(--text-heading);
  --type-title-sm-font-size: var(--font-size-lg);
  --type-title-sm-font-weight: var(--font-weight-semibold);
  --type-title-sm-line-height: 1.3;
  --type-title-sm-letter-spacing: 0px;
  --type-body-lg-font-family: var(--text-body);
  --type-body-lg-font-size: var(--font-size-xl);
  --type-body-lg-font-weight: var(--font-weight-regular);
  --type-body-lg-line-height: 1.6;
  --type-body-lg-letter-spacing: 0px;
  --type-body-md-font-family: var(--text-body);
  --type-body-md-font-size: var(--font-size-lg);
  --type-body-md-font-weight: var(--font-weight-regular);
  --type-body-md-line-height: 1.65;
  --type-body-md-letter-spacing: 0px;
  --type-body-sm-font-family: var(--text-body);
  --type-body-sm-font-size: var(--font-size-md);
  --type-body-sm-font-weight: var(--font-weight-regular);
  --type-body-sm-line-height: 1.5;
  --type-body-sm-letter-spacing: 0px;
  --type-label-md-font-family: var(--text-body);
  --type-label-md-font-size: var(--font-size-md);
  --type-label-md-font-weight: var(--font-weight-regular);
  --type-label-md-line-height: 1.4;
  --type-label-md-letter-spacing: 0px;
  --type-label-sm-font-family: var(--text-body);
  --type-label-sm-font-size: var(--font-size-xs);
  --type-label-sm-font-weight: var(--font-weight-bold);
  --type-label-sm-line-height: 1.4;
  --type-label-sm-letter-spacing: 0.5px;
  --type-control-font-family: var(--text-body);
  --type-control-font-size: var(--font-size-md);
  --type-control-font-weight: var(--font-weight-bold);
  --type-control-line-height: 1.4;
  --type-control-letter-spacing: 0px;
  --type-code-font-family: var(--text-code);
  --type-code-font-size: var(--font-size-sm);
  --type-code-font-weight: var(--font-weight-regular);
  --type-code-line-height: 1.6;
  --type-code-letter-spacing: 0px;
  --transition-hover: var(--motion-duration-fast) var(--motion-ease-out) 0ms;
  --transition-theme: var(--motion-duration-base) var(--motion-ease-standard) 0ms;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --pattern-dot-spacing: 28px;
  --pattern-dot-size: 1.5px;
  --color-bg-page: var(--color-cream-100);
  --color-bg-surface: var(--color-cream-200);
  --color-text-primary: var(--color-brown-900);
  --color-text-muted: var(--color-brown-400);
  --color-text-accent: var(--color-orange-600);
  --color-border-default: var(--color-cream-300);
  --color-border-active: var(--color-orange-500);
  --color-action-primary-bg: var(--color-orange-500);
  --color-action-primary-bg-hover: var(--color-orange-600);
  --color-action-primary-text: var(--color-cream-50);
  --color-action-primary-bg-active: var(--color-orange-600);
  --color-action-primary-bg-disabled: var(--color-cream-300);
  --color-action-primary-text-disabled: var(--color-brown-400);
  --color-action-secondary-bg: var(--color-mustard-500);
  --color-action-secondary-bg-hover: var(--color-gold-500);
  --color-action-secondary-text: var(--color-brown-900);
  --color-action-secondary-bg-active: var(--color-gold-500);
  --color-focus-ring: var(--color-orange-500);
  --color-link-default: var(--color-orange-600);
  --color-link-hover: var(--color-orange-500);
  --color-status-success: var(--color-olive-700);
  --color-status-warning: var(--color-yellow-700);
  --color-status-info: var(--color-teal-700);
  --color-status-success-bg: var(--color-olive-700);
  --color-status-success-on: var(--color-cream-50);
  --color-status-success-tint: var(--color-olive-100);
  --color-status-warning-bg: var(--color-yellow-500);
  --color-status-warning-on: var(--color-brown-900);
  --color-status-warning-tint: var(--color-yellow-100);
  --color-status-info-bg: var(--color-teal-700);
  --color-status-info-on: var(--color-cream-50);
  --color-status-info-tint: var(--color-teal-100);
  --color-status-error: var(--color-red-700);
  --color-status-error-bg: var(--color-red-700);
  --color-status-error-tint: var(--color-red-100);
  --color-status-error-on: var(--color-cream-50);
  --syntax-comment: var(--color-brown-500);
  --syntax-number: var(--color-plum-700);
  --syntax-boolean: var(--color-plum-700);
  --syntax-builtin: var(--color-plum-700);
  --syntax-string: var(--color-olive-700);
  --syntax-string-escape: var(--color-amber-700);
  --syntax-string-special: var(--color-amber-700);
  --syntax-keyword: var(--color-orange-600);
  --syntax-operator: var(--color-brown-500);
  --syntax-punctuation: var(--color-brown-500);
  --syntax-variable: var(--color-brown-900);
  --syntax-parameter: var(--color-brown-400);
  --syntax-member: var(--color-brown-400);
  --syntax-constant: var(--color-plum-700);
  --syntax-function: var(--color-amber-700);
  --syntax-function-call: var(--color-amber-700);
  --syntax-constructor: var(--color-amber-700);
  --syntax-type: var(--color-teal-700);
  --syntax-type-builtin: var(--color-teal-700);
  --syntax-module: var(--color-teal-700);
  --shadow-raised: 0px 24px 48px -24px rgb(59 36 22 / 0.35);
}

[data-theme="light"] {
  color-scheme: light;
  --color-bg-page: var(--color-cream-100);
  --color-bg-surface: var(--color-cream-200);
  --color-text-primary: var(--color-brown-900);
  --color-text-muted: var(--color-brown-400);
  --color-text-accent: var(--color-orange-600);
  --color-border-default: var(--color-cream-300);
  --color-border-active: var(--color-orange-500);
  --color-action-primary-bg: var(--color-orange-500);
  --color-action-primary-bg-hover: var(--color-orange-600);
  --color-action-primary-text: var(--color-cream-50);
  --color-action-primary-bg-active: var(--color-orange-600);
  --color-action-primary-bg-disabled: var(--color-cream-300);
  --color-action-primary-text-disabled: var(--color-brown-400);
  --color-action-secondary-bg: var(--color-mustard-500);
  --color-action-secondary-bg-hover: var(--color-gold-500);
  --color-action-secondary-text: var(--color-brown-900);
  --color-action-secondary-bg-active: var(--color-gold-500);
  --color-focus-ring: var(--color-orange-500);
  --color-link-default: var(--color-orange-600);
  --color-link-hover: var(--color-orange-500);
  --color-status-success: var(--color-olive-700);
  --color-status-warning: var(--color-yellow-700);
  --color-status-info: var(--color-teal-700);
  --color-status-success-bg: var(--color-olive-700);
  --color-status-success-on: var(--color-cream-50);
  --color-status-success-tint: var(--color-olive-100);
  --color-status-warning-bg: var(--color-yellow-500);
  --color-status-warning-on: var(--color-brown-900);
  --color-status-warning-tint: var(--color-yellow-100);
  --color-status-info-bg: var(--color-teal-700);
  --color-status-info-on: var(--color-cream-50);
  --color-status-info-tint: var(--color-teal-100);
  --color-status-error: var(--color-red-700);
  --color-status-error-bg: var(--color-red-700);
  --color-status-error-tint: var(--color-red-100);
  --color-status-error-on: var(--color-cream-50);
  --syntax-comment: var(--color-brown-500);
  --syntax-number: var(--color-plum-700);
  --syntax-boolean: var(--color-plum-700);
  --syntax-builtin: var(--color-plum-700);
  --syntax-string: var(--color-olive-700);
  --syntax-string-escape: var(--color-amber-700);
  --syntax-string-special: var(--color-amber-700);
  --syntax-keyword: var(--color-orange-600);
  --syntax-operator: var(--color-brown-500);
  --syntax-punctuation: var(--color-brown-500);
  --syntax-variable: var(--color-brown-900);
  --syntax-parameter: var(--color-brown-400);
  --syntax-member: var(--color-brown-400);
  --syntax-constant: var(--color-plum-700);
  --syntax-function: var(--color-amber-700);
  --syntax-function-call: var(--color-amber-700);
  --syntax-constructor: var(--color-amber-700);
  --syntax-type: var(--color-teal-700);
  --syntax-type-builtin: var(--color-teal-700);
  --syntax-module: var(--color-teal-700);
  --shadow-raised: 0px 24px 48px -24px rgb(59 36 22 / 0.35);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-page: var(--color-espresso-900);
  --color-bg-surface: var(--color-espresso-800);
  --color-text-primary: var(--color-gold-200);
  --color-text-muted: var(--color-gold-400);
  --color-text-accent: var(--color-gold-500);
  --color-border-default: var(--color-espresso-700);
  --color-border-active: var(--color-gold-500);
  --color-action-primary-bg: var(--color-gold-500);
  --color-action-primary-bg-hover: var(--color-gold-600);
  --color-action-primary-text: var(--color-espresso-900);
  --color-action-primary-bg-active: var(--color-gold-600);
  --color-action-primary-bg-disabled: var(--color-espresso-700);
  --color-action-primary-text-disabled: var(--color-gold-400);
  --color-action-secondary-bg: var(--color-espresso-700);
  --color-action-secondary-bg-hover: var(--color-espresso-800);
  --color-action-secondary-text: var(--color-gold-200);
  --color-action-secondary-bg-active: var(--color-espresso-800);
  --color-focus-ring: var(--color-gold-500);
  --color-link-default: var(--color-gold-500);
  --color-link-hover: var(--color-gold-600);
  --color-status-success: var(--color-olive-300);
  --color-status-warning: var(--color-yellow-300);
  --color-status-info: var(--color-teal-300);
  --color-status-success-bg: var(--color-olive-300);
  --color-status-success-on: var(--color-espresso-900);
  --color-status-success-tint: var(--color-olive-900);
  --color-status-warning-bg: var(--color-yellow-300);
  --color-status-warning-on: var(--color-espresso-900);
  --color-status-warning-tint: var(--color-yellow-900);
  --color-status-info-bg: var(--color-teal-300);
  --color-status-info-on: var(--color-espresso-900);
  --color-status-info-tint: var(--color-teal-900);
  --color-status-error: var(--color-red-300);
  --color-status-error-bg: var(--color-red-300);
  --color-status-error-tint: var(--color-red-900);
  --color-status-error-on: var(--color-espresso-900);
  --syntax-comment: var(--color-gold-400);
  --syntax-number: var(--color-plum-300);
  --syntax-boolean: var(--color-plum-300);
  --syntax-builtin: var(--color-plum-300);
  --syntax-string: var(--color-olive-300);
  --syntax-string-escape: var(--color-amber-300);
  --syntax-string-special: var(--color-amber-300);
  --syntax-keyword: var(--color-gold-500);
  --syntax-operator: var(--color-gold-400);
  --syntax-punctuation: var(--color-gold-400);
  --syntax-variable: var(--color-gold-200);
  --syntax-parameter: var(--color-gold-400);
  --syntax-member: var(--color-gold-400);
  --syntax-constant: var(--color-plum-300);
  --syntax-function: var(--color-amber-300);
  --syntax-function-call: var(--color-amber-300);
  --syntax-constructor: var(--color-amber-300);
  --syntax-type: var(--color-teal-300);
  --syntax-type-builtin: var(--color-teal-300);
  --syntax-module: var(--color-teal-300);
  --shadow-raised: 0px 24px 48px -24px rgb(14 9 3 / 0.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg-page: var(--color-espresso-900);
    --color-bg-surface: var(--color-espresso-800);
    --color-text-primary: var(--color-gold-200);
    --color-text-muted: var(--color-gold-400);
    --color-text-accent: var(--color-gold-500);
    --color-border-default: var(--color-espresso-700);
    --color-border-active: var(--color-gold-500);
    --color-action-primary-bg: var(--color-gold-500);
    --color-action-primary-bg-hover: var(--color-gold-600);
    --color-action-primary-text: var(--color-espresso-900);
    --color-action-primary-bg-active: var(--color-gold-600);
    --color-action-primary-bg-disabled: var(--color-espresso-700);
    --color-action-primary-text-disabled: var(--color-gold-400);
    --color-action-secondary-bg: var(--color-espresso-700);
    --color-action-secondary-bg-hover: var(--color-espresso-800);
    --color-action-secondary-text: var(--color-gold-200);
    --color-action-secondary-bg-active: var(--color-espresso-800);
    --color-focus-ring: var(--color-gold-500);
    --color-link-default: var(--color-gold-500);
    --color-link-hover: var(--color-gold-600);
    --color-status-success: var(--color-olive-300);
    --color-status-warning: var(--color-yellow-300);
    --color-status-info: var(--color-teal-300);
    --color-status-success-bg: var(--color-olive-300);
    --color-status-success-on: var(--color-espresso-900);
    --color-status-success-tint: var(--color-olive-900);
    --color-status-warning-bg: var(--color-yellow-300);
    --color-status-warning-on: var(--color-espresso-900);
    --color-status-warning-tint: var(--color-yellow-900);
    --color-status-info-bg: var(--color-teal-300);
    --color-status-info-on: var(--color-espresso-900);
    --color-status-info-tint: var(--color-teal-900);
    --color-status-error: var(--color-red-300);
    --color-status-error-bg: var(--color-red-300);
    --color-status-error-tint: var(--color-red-900);
    --color-status-error-on: var(--color-espresso-900);
    --syntax-comment: var(--color-gold-400);
    --syntax-number: var(--color-plum-300);
    --syntax-boolean: var(--color-plum-300);
    --syntax-builtin: var(--color-plum-300);
    --syntax-string: var(--color-olive-300);
    --syntax-string-escape: var(--color-amber-300);
    --syntax-string-special: var(--color-amber-300);
    --syntax-keyword: var(--color-gold-500);
    --syntax-operator: var(--color-gold-400);
    --syntax-punctuation: var(--color-gold-400);
    --syntax-variable: var(--color-gold-200);
    --syntax-parameter: var(--color-gold-400);
    --syntax-member: var(--color-gold-400);
    --syntax-constant: var(--color-plum-300);
    --syntax-function: var(--color-amber-300);
    --syntax-function-call: var(--color-amber-300);
    --syntax-constructor: var(--color-amber-300);
    --syntax-type: var(--color-teal-300);
    --syntax-type-builtin: var(--color-teal-300);
    --syntax-module: var(--color-teal-300);
    --shadow-raised: 0px 24px 48px -24px rgb(14 9 3 / 0.6);
  }
}