:root {
  color-scheme: dark;

  --teal: #1a7a6d;
  --teal-br: #23A595;
  --teal-dark: #0f5c52;
  --purple: #3d1f47;
  --purple-mid: #5a3068;
  --violet: #6e43a7;
  --amber: #c48a2a;
  --gold: #b78100;
  --cyan: #2a8fa0;
  --accent-violet: #8a5ac4;
  --rose: #d4416b;
  --black: #050505;
  --cream: #f0ebe3;

  --bg: var(--black);
  --ink: var(--cream);
  --ink-s: color-mix(in srgb, var(--cream) 68%, transparent);
  --ink-t: color-mix(in srgb, var(--cream) 42%, transparent);
  --teal-txt: var(--teal-br);
  --surface: color-mix(in srgb, var(--cream) 4%, var(--black));
  --panel: color-mix(in srgb, var(--cream) 5%, var(--black));
  --muted: color-mix(in srgb, var(--cream) 62%, transparent);
  --dim: color-mix(in srgb, var(--cream) 38%, transparent);
  --faint: color-mix(in srgb, var(--cream) 22%, transparent);
  --border: color-mix(in srgb, var(--cream) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--cream) 24%, transparent);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --shadow: color-mix(in srgb, var(--black) 70%, transparent);
  --grid-line: color-mix(in srgb, var(--cream) 3%, transparent);

  --font-body: Switzer, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-med: 180ms;
  --dur-slow: 320ms;
  --edge: clamp(20px, 5vw, 72px);
}

[data-theme="light"] {
  color-scheme: light;

  --bg: var(--cream);
  --ink: #1d1d1f;
  --ink-s: color-mix(in srgb, var(--ink) 68%, transparent);
  --ink-t: color-mix(in srgb, var(--ink) 46%, transparent);
  --surface: color-mix(in srgb, var(--black) 4%, var(--cream));
  --panel: color-mix(in srgb, var(--black) 6%, var(--cream));
  --muted: color-mix(in srgb, var(--ink) 58%, transparent);
  --dim: color-mix(in srgb, var(--ink) 36%, transparent);
  --faint: color-mix(in srgb, var(--ink) 20%, transparent);
  --border: color-mix(in srgb, var(--ink) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--ink) 25%, transparent);
  --line: var(--border);
  --line-strong: var(--border-strong);
  --shadow: color-mix(in srgb, var(--black) 16%, transparent);
  --grid-line: color-mix(in srgb, var(--ink) 5%, transparent);
}