@layer defaults {
  :root {
    color-scheme: light;
    font-family: var(--theme-font-body);

    --theme-font-body:
      Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --theme-font-mono:
      "SF Mono", SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --theme-font-presentation: var(--theme-font-body);

    --theme-fill-canvas: #f7f8fa;
    --theme-fill-surface: #ffffff;
    --theme-fill-surface-secondary: #eef1f4;
    --theme-color-text: #161616;
    --theme-color-text-muted: #5f6670;
    --theme-color-accent: #0f7b6c;
    --theme-color-border: #d9dde3;
    --theme-color-danger: #b0413e;
    --theme-color-backdrop: rgba(0, 0, 0, 0.5);

    --theme-spacing-xxs: 4px;
    --theme-spacing-xs: 8px;
    --theme-spacing-sm: 12px;
    --theme-spacing-md: 16px;
    --theme-spacing-lg: 20px;
    --theme-spacing-xl: 28px;
    --theme-spacing-xxl: 48px;
    --theme-spacing-page: clamp(20px, 5vw, 64px);

    --theme-radius-sm: 0.5em;
    --theme-radius-md: 0.75em;
    --theme-elevation-md: 0 18px 48px color-mix(in srgb, var(--theme-color-text), transparent 88%);
    --theme-focus-ring: 3px solid color-mix(in srgb, var(--theme-color-accent), transparent 78%);

    overscroll-behavior: none;
  }
}