/* Generated by scripts/tokens.mjs from design/tokens/ohmybug.tokens.json. Do not edit: change the JSON and run `node scripts/tokens.mjs`. */
:root {
  color-scheme: light;
  --bg: #f5f4ef;
  --surface: #ffffff;
  --text: #1c1b19;
  --muted: #5f5c55;
  --brand: #0f7b5f;
  --brand-text: #0b5e49;
  --accent: #e3256b;
  --danger: #c4105a;
  --success: #0b5e49;
  --border: #dddad1;
  --focus: #0f7b5f;
  --warning: #8a5300;
  --info: #1d4ed8;
  --surface-alt: #e9e4d8;
  --body: #3d3b37;
  --accent-ink: #1a0109;
  --panel: #0f0f0e;
  --panel-2: #1c1b19;
  --panel-3: #262523;
  --on-panel: #f5f4ef;
  --on-panel-dim: #c4c0b6;
  --on-panel-brand: #2bb58a;
  --on-panel-danger: #ff6b9f;
  --shadow: #0f0f0e;
  --font-sans: "Onest", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --type-display-family: var(--font-sans);
  --type-display-size: clamp(2.625rem, 1.6534rem + 4.3182vw, 5rem);
  --type-display-line: 1.05;
  --type-display-weight: 800;
  --type-display-tracking: 0px;
  --type-h1-family: var(--font-sans);
  --type-h1-size: clamp(1.8125rem, 1.4034rem + 1.8182vw, 2.8125rem);
  --type-h1-line: 1.1;
  --type-h1-weight: 800;
  --type-h1-tracking: 0px;
  --type-h2-family: var(--font-sans);
  --type-h2-size: clamp(1.5rem, 1.2443rem + 1.1364vw, 2.125rem);
  --type-h2-line: 1.15;
  --type-h2-weight: 800;
  --type-h2-tracking: 0px;
  --type-h3-family: var(--font-sans);
  --type-h3-size: clamp(1.25rem, 1.1222rem + 0.5682vw, 1.5625rem);
  --type-h3-line: 1.25;
  --type-h3-weight: 600;
  --type-h3-tracking: 0px;
  --type-body-family: var(--font-sans);
  --type-body-size: clamp(1.0625rem, 1.0114rem + 0.2273vw, 1.1875rem);
  --type-body-line: 1.6;
  --type-body-weight: 400;
  --type-body-tracking: 0px;
  --type-small-family: var(--font-sans);
  --type-small-size: 0.875rem;
  --type-small-line: 1.5;
  --type-small-weight: 400;
  --type-small-tracking: 0px;
  --type-label-family: var(--font-mono);
  --type-label-size: 0.8125rem;
  --type-label-line: 1.4;
  --type-label-weight: 600;
  --type-label-tracking: 0px;
  --type-section-family: var(--font-sans);
  --type-section-size: clamp(2.25rem, 1.125rem + 5vw, 5rem);
  --type-section-line: 1.04;
  --type-section-weight: 800;
  --type-section-tracking: 0px;
  --type-section-sm-family: var(--font-sans);
  --type-section-sm-size: clamp(2rem, 1.0795rem + 4.0909vw, 4.25rem);
  --type-section-sm-line: 1.04;
  --type-section-sm-weight: 800;
  --type-section-sm-tracking: 0px;
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --radius-xl: 24px;
  --cta-bg: var(--brand);
  --cta-ink: #ffffff;
  --cta-hover: #0b5e49;
  --logo-badge-bg: var(--brand);
  --code-bg: var(--surface);
  --code-text: var(--text);
  --rule: var(--border);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f0f0e;
    --surface: #1c1b19;
    --text: #f5f4ef;
    --muted: #9a968d;
    --brand: #0f7b5f;
    --brand-text: #2bb58a;
    --accent: #e3256b;
    --danger: #f5508a;
    --success: #2bb58a;
    --border: #3d3b37;
    --focus: #2bb58a;
    --warning: #f5b544;
    --info: #7aa7ff;
    --surface-alt: #262523;
    --body: #c4c0b6;
    --panel: #1c1b19;
    --panel-2: #262523;
    --panel-3: #2f2e2b;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f0e;
  --surface: #1c1b19;
  --text: #f5f4ef;
  --muted: #9a968d;
  --brand: #0f7b5f;
  --brand-text: #2bb58a;
  --accent: #e3256b;
  --danger: #f5508a;
  --success: #2bb58a;
  --border: #3d3b37;
  --focus: #2bb58a;
  --warning: #f5b544;
  --info: #7aa7ff;
  --surface-alt: #262523;
  --body: #c4c0b6;
  --panel: #1c1b19;
  --panel-2: #262523;
  --panel-3: #2f2e2b;
}