:root,
[data-theme="light"] {
  --nk-font-sans: InterVariable, Inter, ui-sans-serif, system-ui, sans-serif;
  --nk-color-canvas: oklch(1 0 0);
  --nk-color-surface: oklch(1 0 0);
  --nk-color-foreground: oklch(0.21 0.006 285.885);
  --nk-color-primary: oklch(0.274 0.006 286.033);
  --nk-color-primary-foreground: oklch(1 0 0);
  --nk-color-focus: var(--color-brand);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --nk-color-canvas: oklch(0.141 0.005 285.823);
    --nk-color-surface: oklch(0.178 0.006 285.885);
    --nk-color-foreground: oklch(0.967 0.001 286.375);
    --nk-color-primary: oklch(1 0 0);
    --nk-color-primary-foreground: oklch(0.274 0.006 286.033);
    --nk-color-focus: var(--color-brand);
    --nk-button-default-background: oklch(0.3 0.01 286);
  }
}

[data-theme="dark"] {
  --nk-color-canvas: oklch(0.141 0.005 285.823);
  --nk-color-surface: oklch(0.178 0.006 285.885);
  --nk-color-foreground: oklch(0.967 0.001 286.375);
  --nk-color-primary: oklch(1 0 0);
  --nk-color-primary-foreground: oklch(0.274 0.006 286.033);
  --nk-color-focus: var(--color-brand);
  --nk-button-default-background: oklch(0.3 0.01 286);
}

@media (color-gamut: p3) {
  :root {
    --color-brand: color(display-p3 0.129427 0.318577 0.686222 / 1);
  }
}