:root,
[data-theme="light"] {
  --color-ink: #292929;
  --color-carbon: #1c1c1c;
  --color-paper: #ffffff;
  --color-linen: #f7f6f5;
  --color-ash: #ebeae9;
  --color-stone: #d1cfce;
  --color-slate: #737373;

  --color-cobalt: #093acd;
  --color-success: #28a948;
  --color-warning: #ffb200;
  --color-error: #fc0035;

  --color-canvas: var(--color-paper);
  --color-surface-primary: var(--color-paper);
  --color-surface-secondary: var(--color-linen);
  --color-surface: var(--color-surface-secondary);
  --color-text: var(--color-ink);
  --color-metadata: var(--color-slate);
  --color-border: var(--color-ash);
  --color-divider: var(--color-stone);
  --color-action: var(--color-cobalt);
  --color-action-text: var(--color-paper);
}

[data-theme="dark"] {
  --color-canvas: var(--color-carbon);
  --color-surface-primary: var(--color-ink);
  --color-surface-secondary: var(--color-ink);
  --color-surface: var(--color-ink);
  --color-text: var(--color-paper);
  --color-metadata: var(--color-stone);
  --color-border: var(--color-ink);
  --color-divider: var(--color-slate);
  --color-action: var(--color-cobalt);
  --color-action-text: var(--color-paper);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-canvas: var(--color-carbon);
    --color-surface-primary: var(--color-ink);
    --color-surface-secondary: var(--color-ink);
    --color-surface: var(--color-ink);
    --color-text: var(--color-paper);
    --color-metadata: var(--color-stone);
    --color-border: var(--color-ink);
    --color-divider: var(--color-slate);
    --color-action: var(--color-cobalt);
    --color-action-text: var(--color-paper);
  }
}