:root {
  color-scheme: light;

  /* Neutral color roles */
  --ods-canvas: #ffffff;
  --ods-ink: #000000;
  --ods-ink-secondary: rgb(0 0 0 / 60%);
  --ods-ink-tertiary: rgb(0 0 0 / 44%);
  --ods-border: rgb(0 0 0 / 12%);
  --ods-surface-quiet: rgb(0 0 0 / 4%);
  --ods-surface-muted: #f1f1f1;
  --ods-action: #000000;
  --ods-action-ink: #ffffff;

  --ods-font-sans: Inter, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  --ods-font-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --ods-text-meta: 0.8125rem;
  --ods-leading-meta: 1.23rem;
  --ods-text-ui: 0.875rem;
  --ods-leading-ui: 1.225rem;
  --ods-text-body: 1.0625rem;
  --ods-leading-body: 1.75rem;
  --ods-text-display-sm: 1.75rem;
  --ods-leading-display-sm: 2.125rem;
  --ods-text-display-lg: clamp(2.25rem, 3.56vw, 2.85rem);
  --ods-leading-display-lg: 1.16;

  --ods-weight-regular: 400;
  --ods-weight-medium: 500;
  --ods-tracking-tight: -0.01em;

  --ods-space-1: 0.25rem;
  --ods-space-2: 0.5rem;
  --ods-space-3: 0.75rem;
  --ods-space-4: 1rem;
  --ods-space-5: 1.25rem;
  --ods-space-6: 1.5rem;
  --ods-space-8: 2rem;
  --ods-space-10: 2.5rem;
  --ods-space-16: 4rem;
  --ods-space-20: 5rem;
  --ods-space-30: 7.5rem;

  --ods-gutter: 1.5rem;
  --ods-container: 90rem;
  --ods-reading: 48rem;
  --ods-reading-compact: 41.875rem;
  --ods-nav-height: 3.5rem;
  --ods-control-sm: 2rem;
  --ods-control-md: 2.5rem;

  --ods-radius-sm: 0.375rem;
  --ods-radius-md: 0.5rem;
  --ods-radius-lg: 1rem;
  --ods-radius-pill: 9999px;

  --ods-shadow-float: 0 1rem 3rem rgb(0 0 0 / 6%);

  --ods-duration-fast: 100ms;
  --ods-duration-control: 200ms;
  --ods-duration-state: 250ms;
  --ods-duration-media: 300ms;
  --ods-duration-cycle: 500ms;
  --ods-ease-linear-control: cubic-bezier(0, 0, 1, 1);
  --ods-ease-control: cubic-bezier(0.17, 0.17, 0.3, 1);
  --ods-ease-media: cubic-bezier(0, 0.56, 0.46, 1);
  --ods-ease-cycle: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 48rem) {
  :root {
    --ods-gutter: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ods-duration-fast: 0ms;
    --ods-duration-control: 0ms;
    --ods-duration-state: 0ms;
    --ods-duration-media: 0ms;
    --ods-duration-cycle: 0ms;
  }
}