/* Neutral zinc palette shared by the website and documentation. */
:root {
  --background: light-dark(#fafafa, #09090b);
  --foreground: light-dark(#18181b, #fafafa);
  --surface: light-dark(#ffffff, #111113);
  --surface-2: light-dark(#f4f4f5, #18181b);
  --surface-3: light-dark(#e4e4e7, #27272a);
  --surface-code: light-dark(#ffffff, #0c0c0e);
  --card: var(--surface);
  --card-foreground: var(--foreground);
  --popover: var(--surface);
  --popover-foreground: var(--foreground);
  --primary: var(--foreground);
  --primary-foreground: var(--background);
  --secondary: var(--surface-2);
  --secondary-foreground: var(--foreground);
  --muted-foreground: light-dark(#65656e, #a1a1aa);
  --accent: var(--foreground);
  --accent-soft: light-dark(#ededf0, #232326);
  --accent-foreground: var(--background);
  --status-online: light-dark(#18764b, #8acaab);
  --border: light-dark(#dedee3, #29292e);
  --border-strong: light-dark(#c7c7cf, #3f3f46);
  --input: var(--border);
  --ring: var(--foreground);
  --text: var(--foreground);
  --text-primary: var(--foreground);
  --text-secondary: light-dark(#52525b, #a1a1aa);
  --text-muted: var(--muted-foreground);
  --text-body: light-dark(#3f3f46, #d4d4d8);
  --code: var(--surface-code);
  --code-text: var(--foreground);
  --button: var(--surface-2);
  --button-hover: var(--surface-3);
  --code-comment: light-dark(#65656e, #a1a1aa);
  --code-keyword: light-dark(#6941a5, #c4a9ef);
  --code-string: light-dark(#36704d, #a0cbaa);
  --code-ident: light-dark(#35657a, #aacbd9);
  --shadow-xs: 0 1px 2px light-dark(#18181b08, #00000030);
  --shadow-md: 0 12px 28px light-dark(#18181b0a, #00000040);
  --shadow-lg: 0 24px 64px light-dark(#18181b14, #00000060);
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --border: #29292e;
}
:root[data-theme='light'] {
  color-scheme: light;
  --border: #dedee3;
}