:root,
[data-bs-theme="light"] {
  color-scheme: light;

  --ov-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ov-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --ov-step--2: 0.75rem;
  --ov-step--1: 0.875rem;
  --ov-step-0: 1rem;
  --ov-step-1: 1.125rem;
  --ov-step-2: 1.25rem;
  --ov-step-3: 1.5rem;
  --ov-step-4: 1.875rem;
  --ov-step-5: 2.375rem;
  --ov-step-6: 3rem;
  --ov-step-7: 3.75rem;

  --ov-line-tight: 1.15;
  --ov-line-heading: 1.2;
  --ov-line-body: 1.5;
  --ov-line-longform: 1.65;

  --ov-space-0: 0;
  --ov-space-1: 0.5rem;
  --ov-space-2: 1rem;
  --ov-space-3: 1.5rem;
  --ov-space-4: 2rem;
  --ov-space-5: 2.5rem;
  --ov-space-6: 3rem;
  --ov-space-7: 4rem;
  --ov-space-8: 5rem;
  --ov-space-9: 6rem;
  --ov-space-10: 8rem;

  --ov-radius-1: 0.25rem;
  --ov-radius-2: 0.375rem;
  --ov-radius-3: 0.5rem;
  --ov-radius-pill: 999px;

  --ov-color-primary: #2457e6;
  --ov-color-primary-hover: #1d46bf;
  --ov-color-primary-soft: #e8efff;
  --ov-color-secondary: #172033;
  --ov-color-accent: #00a3a3;
  --ov-color-accent-hover: #008787;
  --ov-color-accent-soft: #e0f7f5;
  --ov-color-success: #12805c;
  --ov-color-success-soft: #e5f6ef;
  --ov-color-warning: #b7791f;
  --ov-color-warning-soft: #fff4db;
  --ov-color-danger: #c92a2a;
  --ov-color-danger-soft: #ffe8e8;
  --ov-color-info: #0b74b8;
  --ov-color-info-soft: #e5f4ff;

  --ov-color-bg: #f7f9fc;
  --ov-color-bg-subtle: #f1f5f9;
  --ov-color-surface: #ffffff;
  --ov-color-surface-alt: #f8fafc;
  --ov-color-surface-raised: #ffffff;
  --ov-color-border: #d8e0ea;
  --ov-color-border-strong: #b7c4d3;
  --ov-color-text: #172033;
  --ov-color-text-muted: #64748b;
  --ov-color-text-soft: #7d8ba0;
  --ov-color-heading: #0d1726;
  --ov-color-code-bg: #eef3f8;
  --ov-color-code-text: #17324f;
  --ov-color-backdrop: rgb(13 23 38 / 0.54);

  --ov-focus-ring: #78a6ff;
  --ov-shadow-xs: 0 1px 2px rgb(13 23 38 / 0.06);
  --ov-shadow-sm: 0 8px 24px rgb(13 23 38 / 0.08), 0 1px 2px rgb(13 23 38 / 0.06);
  --ov-shadow-md: 0 16px 44px rgb(13 23 38 / 0.12), 0 2px 8px rgb(13 23 38 / 0.07);

  --ov-container-compact: 68rem;
  --ov-container-standard: 76rem;
  --ov-container-wide: 84rem;
  --ov-content-width: 47.5rem;
  --ov-docs-width: 51.25rem;
  --ov-blog-width: 45rem;
  --ov-sidebar-width: 17.5rem;
  --ov-toc-width: 13.75rem;
  --ov-gutter: clamp(1rem, 4vw, 2rem);

  --ov-transition-fast: 120ms ease;
  --ov-transition-base: 180ms ease;

  --bs-body-font-family: var(--ov-font-sans);
  --bs-body-font-size: var(--ov-step-0);
  --bs-body-line-height: var(--ov-line-body);
  --bs-body-color: var(--ov-color-text);
  --bs-body-bg: var(--ov-color-bg);
  --bs-primary: var(--ov-color-primary);
  --bs-secondary: var(--ov-color-secondary);
  --bs-success: var(--ov-color-success);
  --bs-info: var(--ov-color-info);
  --bs-warning: var(--ov-color-warning);
  --bs-danger: var(--ov-color-danger);
  --bs-border-color: var(--ov-color-border);
  --bs-border-radius: var(--ov-radius-2);
  --bs-link-color: var(--ov-color-primary);
  --bs-link-hover-color: var(--ov-color-primary-hover);
  --bs-focus-ring-color: rgb(120 166 255 / 0.45);
}

[data-bs-theme="dark"] {
  color-scheme: dark;

  --ov-color-primary: #78a6ff;
  --ov-color-primary-hover: #9bbdff;
  --ov-color-primary-soft: #13294f;
  --ov-color-secondary: #dde6f3;
  --ov-color-accent: #45d6cd;
  --ov-color-accent-hover: #71e4dd;
  --ov-color-accent-soft: #0b3437;
  --ov-color-success: #4fd1a1;
  --ov-color-success-soft: #0d3328;
  --ov-color-warning: #f2c14e;
  --ov-color-warning-soft: #3c2c0c;
  --ov-color-danger: #ff7a7a;
  --ov-color-danger-soft: #411719;
  --ov-color-info: #6ec6ff;
  --ov-color-info-soft: #0f2c44;

  --ov-color-bg: #080d13;
  --ov-color-bg-subtle: #0c131b;
  --ov-color-surface: #101821;
  --ov-color-surface-alt: #15202b;
  --ov-color-surface-raised: #182331;
  --ov-color-border: #263445;
  --ov-color-border-strong: #3a4b60;
  --ov-color-text: #dde6f3;
  --ov-color-text-muted: #9aa7b8;
  --ov-color-text-soft: #7f8ea1;
  --ov-color-heading: #f6f9fd;
  --ov-color-code-bg: #142033;
  --ov-color-code-text: #a7d4ff;
  --ov-color-backdrop: rgb(0 0 0 / 0.68);

  --ov-focus-ring: #9bbdff;
  --ov-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.28);
  --ov-shadow-sm: 0 10px 26px rgb(0 0 0 / 0.3), 0 1px 2px rgb(0 0 0 / 0.22);
  --ov-shadow-md: 0 20px 48px rgb(0 0 0 / 0.38), 0 2px 8px rgb(0 0 0 / 0.26);

  --bs-body-color: var(--ov-color-text);
  --bs-body-bg: var(--ov-color-bg);
  --bs-border-color: var(--ov-color-border);
  --bs-link-color: var(--ov-color-primary);
  --bs-link-hover-color: var(--ov-color-primary-hover);
}

@media (max-width: 767.98px) {
  :root {
    --ov-step-5: 2rem;
    --ov-step-6: 2.5rem;
    --ov-step-7: 3rem;
    --ov-space-8: 4rem;
    --ov-space-9: 5rem;
    --ov-space-10: 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ov-transition-fast: 1ms linear;
    --ov-transition-base: 1ms linear;
  }
}