:root {
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --color-ink-medium: #666666;
  --color-ink-light: #999999;
  --color-ink-lighter: #cccccc;
  --color-ink-lightest: #eeeeee;
  --color-ink-inverted: #ffffff;
  --color-selected: #e6f7ff;
  --color-selected-dark: #bae7ff;
  --color-link: #007bff;
  --color-negative: #dc3545;
  --color-positive: #28a745;
  --color-marker: #ffc107;
  --color-highlight: #fff3cd;

  --font-sans: system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --text-xx-small: 0.625rem;
  --text-x-small: 0.75rem;
  --text-small: 0.875rem;
  --text-normal: 1rem;
  --text-medium: 1.125rem;
  --text-large: 1.25rem;
  --text-x-large: 1.5rem;
  --text-xx-large: 2rem;

  --inline-space: 1rem;
  --inline-space-half: 0.5rem;
  --inline-space-double: 2rem;
  --block-space: 1rem;
  --block-space-half: 0.5rem;
  --block-space-double: 2rem;

  --focus-ring-size: 2px;
  --focus-ring-color: var(--color-link);
  --focus-ring-offset: 2px;

  --shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --z-nav: 100;

  --main-padding: 1rem;
  --header-height: 4rem;
}

html[data-theme="dark"] {
  --color-canvas: #1a1a1a;
  --color-ink: #ffffff;
  --color-ink-medium: #aaaaaa;
  --color-ink-light: #777777;
  --color-ink-lighter: #444444;
  --color-ink-lightest: #222222;
  --color-ink-inverted: #000000;
  --color-selected: #003a8c;
  --color-selected-dark: #0050b3;
}