:root {
  --brand-deep: #340380;
  --brand-dark: #480ea0;
  --brand-mid: #6219c7;
  --brand-bright: #7f22f0;
  --brand-glow: #8828fc;
  --brand-canvas: #f8f7fc;

  --c-ground: var(--brand-canvas);
  --c-ground-alt: color-mix(in oklab, var(--brand-canvas) 94%, var(--brand-glow));
  --c-ground-tint: color-mix(in oklab, var(--brand-canvas) 88%, var(--brand-glow));
  --c-panel: var(--brand-canvas);
  --c-ink: var(--brand-deep);
  --c-ink-soft: color-mix(in oklab, var(--brand-deep) 84%, var(--brand-canvas));
  --c-muted: color-mix(in oklab, var(--brand-deep) 72%, var(--brand-canvas));
  --c-muted-2: color-mix(in oklab, var(--brand-deep) 68%, var(--brand-canvas));
  --c-line: color-mix(in oklab, var(--brand-deep) 10%, var(--brand-canvas));
  --c-line-strong: color-mix(in oklab, var(--brand-deep) 20%, var(--brand-canvas));
  --c-accent: var(--brand-mid);
  --c-accent-hover: var(--brand-dark);
  --c-accent-text: var(--brand-mid);
  --c-on-accent: var(--brand-canvas);
  --c-accent-soft: color-mix(in oklab, var(--brand-canvas) 90%, var(--brand-bright));
  --c-accent-line: color-mix(in oklab, var(--brand-canvas) 62%, var(--brand-bright));
  --c-grad-a: var(--brand-mid);
  --c-grad-b: var(--brand-glow);
  --c-state-stated: var(--brand-mid);
  --c-state-absent: var(--c-muted-2);
  --c-state-unconfirmed: var(--brand-bright);
  --c-nav-bg: color-mix(in oklab, var(--brand-canvas) 86%, transparent);
  --c-footer-bg: var(--brand-deep);
  --c-footer-ink: var(--brand-canvas);
  --c-footer-muted: color-mix(in oklab, var(--brand-canvas) 72%, var(--brand-deep));
  --c-footer-line: color-mix(in oklab, var(--brand-canvas) 16%, transparent);
  --c-dark: var(--brand-deep);
  --c-dark-2: color-mix(in oklab, var(--brand-deep) 78%, var(--brand-mid));
  --c-selection: color-mix(in oklab, var(--brand-bright) 24%, transparent);
  --c-scroll-thumb: color-mix(in oklab, var(--brand-deep) 24%, var(--brand-canvas));
  --c-scroll-thumb-hover: color-mix(in oklab, var(--brand-deep) 40%, var(--brand-canvas));
  --c-pulse-from: color-mix(in oklab, var(--brand-bright) 45%, transparent);
  --c-pulse-to: color-mix(in oklab, var(--brand-bright) 0%, transparent);
  --c-light-1: color-mix(in oklab, var(--brand-deep) 38%, var(--brand-canvas));
  --c-light-2: color-mix(in oklab, var(--brand-deep) 24%, var(--brand-canvas));
  --c-light-3: color-mix(in oklab, var(--brand-deep) 12%, var(--brand-canvas));
  --shadow-xs: 0 1px 2px color-mix(in oklab, var(--brand-deep) 8%, transparent);
  --shadow-sm: 0 1px 3px color-mix(in oklab, var(--brand-deep) 8%, transparent), 0 6px 16px color-mix(in oklab, var(--brand-deep) 6%, transparent);
  --shadow-md: 0 2px 6px color-mix(in oklab, var(--brand-deep) 8%, transparent), 0 14px 34px color-mix(in oklab, var(--brand-deep) 10%, transparent);
  --shadow-window: 0 2px 8px color-mix(in oklab, var(--brand-deep) 8%, transparent), 0 24px 60px color-mix(in oklab, var(--brand-deep) 16%, transparent);
  --c-grid-line: color-mix(in oklab, var(--brand-mid) 6%, transparent);
  --c-orbit-1: color-mix(in oklab, var(--brand-mid) 26%, transparent);
  --c-orbit-2: color-mix(in oklab, var(--brand-mid) 18%, transparent);
  --c-orbit-3: color-mix(in oklab, var(--brand-mid) 11%, transparent);
  --c-orbit-dot: color-mix(in oklab, var(--brand-mid) 50%, transparent);
  --c-disc-a: color-mix(in oklab, var(--brand-mid) 26%, transparent);
  --c-disc-b: color-mix(in oklab, var(--brand-mid) 7%, transparent);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --c-ground: var(--brand-deep);
  --c-ground-alt: color-mix(in oklab, var(--brand-deep) 86%, var(--brand-mid));
  --c-ground-tint: color-mix(in oklab, var(--brand-deep) 74%, var(--brand-mid));
  --c-panel: color-mix(in oklab, var(--brand-deep) 90%, var(--brand-mid));
  --c-ink: var(--brand-canvas);
  --c-ink-soft: color-mix(in oklab, var(--brand-canvas) 88%, var(--brand-deep));
  --c-muted: color-mix(in oklab, var(--brand-canvas) 74%, var(--brand-deep));
  --c-muted-2: color-mix(in oklab, var(--brand-canvas) 62%, var(--brand-deep));
  --c-line: color-mix(in oklab, var(--brand-canvas) 12%, var(--brand-deep));
  --c-line-strong: color-mix(in oklab, var(--brand-canvas) 22%, var(--brand-deep));
  --c-accent: var(--brand-glow);
  --c-accent-hover: var(--brand-bright);
  --c-accent-text: color-mix(in oklab, var(--brand-glow) 60%, var(--brand-canvas));
  --c-on-accent: var(--brand-canvas);
  --c-accent-soft: color-mix(in oklab, var(--brand-deep) 76%, var(--brand-glow));
  --c-accent-line: color-mix(in oklab, var(--brand-deep) 52%, var(--brand-glow));
  --c-grad-a: var(--brand-bright);
  --c-grad-b: color-mix(in oklab, var(--brand-glow) 70%, var(--brand-canvas));
  --c-state-stated: color-mix(in oklab, var(--brand-glow) 60%, var(--brand-canvas));
  --c-state-absent: var(--c-muted-2);
  --c-state-unconfirmed: color-mix(in oklab, var(--brand-glow) 70%, var(--brand-canvas));
  --c-nav-bg: color-mix(in oklab, var(--brand-deep) 86%, transparent);
  --c-footer-bg: var(--brand-deep);
  --c-dark: color-mix(in oklab, var(--brand-deep) 84%, var(--brand-mid));
  --c-dark-2: color-mix(in oklab, var(--brand-deep) 70%, var(--brand-mid));
  --c-selection: color-mix(in oklab, var(--brand-glow) 34%, transparent);
  --c-scroll-thumb: color-mix(in oklab, var(--brand-canvas) 28%, var(--brand-deep));
  --c-scroll-thumb-hover: color-mix(in oklab, var(--brand-canvas) 44%, var(--brand-deep));
  --c-pulse-from: color-mix(in oklab, var(--brand-glow) 55%, transparent);
  --c-pulse-to: color-mix(in oklab, var(--brand-glow) 0%, transparent);
  --c-light-1: color-mix(in oklab, var(--brand-canvas) 44%, var(--brand-deep));
  --c-light-2: color-mix(in oklab, var(--brand-canvas) 30%, var(--brand-deep));
  --c-light-3: color-mix(in oklab, var(--brand-canvas) 18%, var(--brand-deep));
  --shadow-xs: 0 1px 2px color-mix(in oklab, var(--brand-deep) 60%, transparent);
  --shadow-sm: 0 1px 3px color-mix(in oklab, var(--brand-deep) 60%, transparent), 0 6px 16px color-mix(in oklab, var(--brand-deep) 40%, transparent);
  --shadow-md: 0 2px 6px color-mix(in oklab, var(--brand-deep) 60%, transparent), 0 14px 34px color-mix(in oklab, var(--brand-deep) 50%, transparent);
  --shadow-window: 0 2px 8px color-mix(in oklab, var(--brand-deep) 60%, transparent), 0 24px 60px color-mix(in oklab, var(--brand-deep) 70%, transparent);
  --c-grid-line: color-mix(in oklab, var(--brand-glow) 9%, transparent);
  --c-orbit-1: color-mix(in oklab, var(--brand-glow) 34%, transparent);
  --c-orbit-2: color-mix(in oklab, var(--brand-glow) 24%, transparent);
  --c-orbit-3: color-mix(in oklab, var(--brand-glow) 15%, transparent);
  --c-orbit-dot: color-mix(in oklab, var(--brand-glow) 60%, transparent);
  --c-disc-a: color-mix(in oklab, var(--brand-glow) 30%, transparent);
  --c-disc-b: color-mix(in oklab, var(--brand-glow) 9%, transparent);
  color-scheme: dark;
}