:root {
  --purple: #6751d4;
  --purple-dark: #241a5c;
  --ink-d: var(--purple-dark);
  --site-nav-h: 2.5rem;
  --db-bg: #ffffff;
  --db-ink: var(--purple);
  --db-chip-ink: var(--purple);
  --db-selected-bg: var(--purple);
  --db-selected-fg: #ffffff;
  --d: var(--db-chip-ink);
  --hard: 6px 6px 0 var(--db-ink);
  --hard-sm: 3px 3px 0 var(--db-ink);
  --hard-lg: 10px 10px 0 var(--db-ink);
  --role-creation: #fbd4d0;
  --role-distribution: #f9d9b0;
  --role-proliferation: #fff3a8;
  --role-infra: #cceef2;
  --role-monetization: #bff5b3;
  --db-space-1: 0.25rem;
  --db-space-2: 0.5rem;
  --db-space-3: 0.75rem;
  --db-space-4: 1rem;
  --db-space-5: 1.25rem;
  --db-space-6: 1.5rem;
  --db-text-xs: 0.75rem;
  --db-text-sm: 0.875rem;
  --db-text-md: 1rem;
  --db-text-lg: 1.25rem;
  --db-muted: 0.8;
  --media-preview-filter: blur(16px) saturate(1.08);
  --media-preview-scale: 1.18;
  --media-preview-opacity: 0.92;
  --db-lh-tight: 1.25;
  --db-lh: 1.4;
  --db-lh-loose: 1.5;
  --db-size-media: 8rem;
  --db-size-media-xs: 3.5rem;
  --db-size-avatar: 4.5rem;
  --db-size-avatar-sm: 3.75rem;
  --db-size-control: 2.75rem;
  --db-size-rail: 20rem;
  --db-font-mono:
    "PT Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas,
    monospace;
  --font-sans:
    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

html.db-theme-dark {
  --db-bg: var(--purple);
  --db-ink: #ffffff;
  --db-selected-bg: #ffffff;
  --db-selected-fg: var(--purple);
  --db-muted: 0.9;
}

:where(*) {
  scrollbar-width: thin;
  scrollbar-color: var(--db-ink) transparent;
}

:where(*)::-webkit-scrollbar { width: 6px; height: 6px; }
:where(*)::-webkit-scrollbar-track { background: transparent; }
:where(*)::-webkit-scrollbar-thumb { background: var(--db-ink); border-radius: 0; }