:root {
  --bg: #f5f5f5;
  --fg: #333333;
  --muted: #666666;
  --border: #dddddd;
  --surface: #ffffff;
  --hover: #eeeeee;
  --link: #0969da;
  --accent: #0969da;
  --on-accent: #ffffff;
  --accent-contrast: var(--on-accent);
  --shadow: rgb(0 0 0 / 18%);

  --accent-fill: color-mix(in srgb, var(--accent-contrast) 12%, transparent);
  --accent-fill-hover: color-mix(in srgb, var(--accent-contrast) 18%, transparent);
  --accent-fill-focus: color-mix(in srgb, var(--accent-contrast) 20%, transparent);
  --accent-fill-active: color-mix(in srgb, var(--accent-contrast) 22%, transparent);
  --accent-border: color-mix(in srgb, var(--accent-contrast) 35%, transparent);
  --accent-placeholder: color-mix(in srgb, var(--accent-contrast) 72%, transparent);
  --accent-focus: color-mix(in srgb, var(--accent-contrast) 75%, transparent);
  --accent-action-hover: color-mix(in srgb, var(--accent-contrast) 85%, transparent);
  --text-primary: var(--fg);
  --text-secondary: var(--muted);
  --status-accepted: #1a7f37;
  --status-won: #bf3989;
  --status-chosen: #8250df;
  --status-rejected: #e8590c;
  --status-not-accepted: #cf222e;
  --status-verify: #0969da;
  --cancel-bg: #ffebe9;
  --cancel-border: #cf222e;
  --outcome-bg: #dafbe1;
  --outcome-border: #1a7f37;
  --backdrop: rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --fg: #e0e0e0;
    --muted: #999999;
    --border: #444444;
    --surface: #242424;
    --hover: #2a2a2a;
    --link: #4493f8;
    --status-accepted: #3fb950;
    --status-won: #db61a2;
    --status-chosen: #a371f7;
    --status-rejected: #ffa657;
    --status-not-accepted: #f85149;
    --status-verify: #4493f8;
    --cancel-bg: #3d1418;
    --cancel-border: #f85149;
    --outcome-bg: #12261e;
    --outcome-border: #3fb950;
  }
}