:root {
  color-scheme: light;
  --color-background-brand: oklch(44.7% 0.211 281deg);
  --color-background-brand-hover: oklch(39.7% 0.211 281deg);
  --color-background-primary: oklch(97% 0.008 280deg);
  --color-background-primary-hover: oklch(95% 0.008 280deg);
  --color-background-secondary: oklch(98% 0.008 280deg);
  --color-background-secondary-hover: oklch(96% 0.008 280deg);
  --color-background-inverse: oklch(92% 0.008 280deg);
  --color-background-inverse-hover: oklch(87% 0 0deg);
  --color-background-selection: oklch(44.8% 0.211 281deg / 99%);
  --color-content-brand: oklch(44.7% 0.211 281deg);
  --color-content-brand-hover: oklch(34.7% 0.211 281deg);
  --color-content-primary: oklch(37% 0.05 281deg);
  --color-content-secondary: oklch(20.5% 0.05 281deg);
  --color-content-tertiary: oklch(60% 0.05 281deg);
  --color-content-inverse: oklch(37% 0 0deg);
  --color-content-selection: oklch(100% 0 0deg);
  --color-border-primary: oklch(90% 0 0deg);
  --color-border-inverse: oklch(85% 0 0deg);
  --color-border-brand: oklch(44.7% 0.211 281deg);
  --color-overlay-brand: oklch(90% 0.211 281deg / 30%);
  --color-code-foreground: oklch(38% 0.02 281deg);
  --color-code-background: oklch(97% 0.008 281deg);
  --color-code-token-constant: oklch(35% 0.118 209deg);
  --color-code-token-string: oklch(35% 0.14 172deg);
  --color-code-token-comment: oklch(35% 0 0deg);
  --color-code-token-keyword: oklch(35% 0.2 240deg);
  --color-code-token-parameter: oklch(30% 0.196 255deg);
  --color-code-token-function: oklch(35% 0.22 285deg);
  --color-code-token-string-expression: oklch(35% 0.211 160deg);
  --color-code-token-punctuation: oklch(40% 0 0deg);
  --color-code-diff-add: oklch(44.71% 0.173 162deg / 10%);

  &[data-theme='dark'] {
    color-scheme: dark;
    --color-background-brand: oklch(44.7% 0.211 281deg);
    --color-background-brand-hover: oklch(39.7% 0.211 281deg);
    --color-background-primary: oklch(26% 0.008 280deg);
    --color-background-primary-hover: oklch(28% 0.008 275deg);
    --color-background-secondary: oklch(25.25% 0.008 280deg);
    --color-background-secondary-hover: oklch(27.25% 0.008 275deg);
    --color-background-inverse: oklch(93% 0.008 280deg);
    --color-background-inverse-hover: oklch(89% 0.008 275deg);
    --color-background-selection: oklch(44.8% 0.211 281deg / 99%);
    --color-content-brand: oklch(74.7% 0.211 281deg);
    --color-content-brand-hover: oklch(64.7% 0.211 281deg);
    --color-content-primary: oklch(93% 0.002 281deg);
    --color-content-secondary: oklch(85% 0.002 281deg);
    --color-content-tertiary: oklch(90% 0.002 281deg);
    --color-content-inverse: oklch(23% 0 0deg);
    --color-content-selection: oklch(100% 0 0deg);
    --color-border-primary: oklch(23% 0 0deg);
    --color-border-inverse: oklch(53% 0 0deg);
    --color-border-brand: oklch(44.7% 0.211 281deg);
    --color-overlay-brand: oklch(45% 0.211 281deg / 30%);
    --color-code-foreground: oklch(95% 0.02 281deg);
    --color-code-background: oklch(24% 0.008 281deg);
    --color-code-token-constant: oklch(75% 0.118 209deg);
    --color-code-token-string: oklch(75% 0.14 172deg);
    --color-code-token-comment: oklch(65% 0 0deg);
    --color-code-token-keyword: oklch(77% 0.152 240deg);
    --color-code-token-parameter: oklch(80% 0.196 255deg);
    --color-code-token-function: oklch(75% 0.22 285deg);
    --color-code-token-string-expression: oklch(75% 0.211 160deg);
    --color-code-token-punctuation: oklch(80% 0 0deg);
    --color-code-diff-add: oklch(44.71% 0.173 162deg / 20%);
  }
}

@media print {
  code,
  code span {
    color: var(--color-code-light) !important;
  }
}
