:root {
  /* Surfaces */
  --color-base: #f5f5f5;
  --color-surface: #ffffff;
  --color-row-hover: #fafafa;
  --color-active-bg: #f0f0f0;

  /* Text */
  --color-text: #1a1a1a;
  --color-text-muted: #666;
  --color-text-light: #aaa;
  --color-text-quietest: #ccc;

  /* Borders */
  --color-border: #e0e0e0;
  --color-border-light: #eee;
  --color-border-lighter: #f0f0f0;
  --color-border-lightest: #f8f8f8;

  /* Semantic: relevance scores */
  --color-score-high: #16a34a;
  --color-score-mid: #ca8a04;
  --color-score-low: #ccc;

  /* Semantic: bookmark */
  --color-bookmark: #ca8a04;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "SF Mono", Consolas, "Liberation Mono", monospace;

  /* Radii */
  --radius: 4px;
  --radius-sm: 3px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Surfaces */
    --color-base: #111111;
    --color-surface: #1a1a1a;
    --color-row-hover: #222222;
    --color-active-bg: #2a2a2a;

    /* Text */
    --color-text: #e5e5e5;
    --color-text-muted: #999;
    --color-text-light: #777;
    --color-text-quietest: #555;

    /* Borders */
    --color-border: #333;
    --color-border-light: #2a2a2a;
    --color-border-lighter: #252525;
    --color-border-lightest: #222;

    /* Semantic: relevance scores */
    --color-score-high: #22c55e;
    --color-score-mid: #eab308;
    --color-score-low: #555;

    /* Semantic: bookmark */
    --color-bookmark: #eab308;
  }
}