:root {
  /* Colors */
  --color-canvas: #ffffff;
  --color-ink: #1a1a1a;
  --color-ink-darker: #333333;
  --color-ink-dark: #4d4d4d;
  --color-ink-medium: #666666;
  --color-ink-light: #999999;
  --color-ink-lighter: #cccccc;
  --color-ink-lightest: #e6e6e6;
  --color-ink-inverted: #ffffff;

  --color-link: #2563eb;
  --color-positive: #10b981;
  --color-negative: #dc2626;
  --color-selected: #dbeafe;
  --color-selected-dark: #93c5fd;
  --color-highlight: #fef3c7;

  /* Spacing */
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);
  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);

  /* Typography */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, monospace;

  --text-small: 0.875rem;
  --text-normal: 1rem;
  --text-medium: 1.125rem;
  --text-large: 1.5rem;

  /* Focus rings */
  --focus-ring-color: var(--color-link);
  --focus-ring-offset: 2px;
  --focus-ring-size: 2px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-canvas: #1a1a1a;
    --color-ink: #e6e6e6;
    --color-ink-darker: #cccccc;
    --color-ink-dark: #b3b3b3;
    --color-ink-medium: #999999;
    --color-ink-light: #666666;
    --color-ink-lighter: #4d4d4d;
    --color-ink-lightest: #333333;
    --color-ink-inverted: #1a1a1a;

    --color-link: #60a5fa;
    --color-positive: #34d399;
    --color-negative: #f87171;
    --color-selected: #1e3a8a;
    --color-selected-dark: #3b82f6;
  }
}

html {
  font-size: 100%;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* Links */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 100ms ease-out;
}

a:hover {
  text-decoration: underline;
}

/* Focus styles */
:is(a, button, input, textarea):focus-visible {
  border-radius: 0.25rem;
  outline: var(--focus-ring-size) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Disabled states */
:is(button, input, textarea)[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-ink);
  font-weight: 700;
  line-height: 1.2;
  margin: 1 0 1rem;
}

h1 {
  font-size: var(--text-large);
}

h2 {
  font-size: var(--text-medium);
}

/* Images */
img {
  display: block;
  max-width: 100%;
}

/* Selection */
::selection {
  background: var(--color-selected);
}