:root {
  color-scheme: light dark;

  --bg:        #fbfbfb;
  --surface:   #ffffff;
  --text:      #242628;
  --muted:     #6e7379;
  --border:    rgba(36, 38, 40, .12);

  --accent:    #20719a;
  --accent-hi: #185d7f;
  --success:   #177245;
  --danger:    #b3261e;

  --radius:    12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow:    0 1px 2px rgba(36, 38, 40, .06), 0 8px 24px rgba(36, 38, 40, .06);

  --font:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --maxw: 1080px;

  --mark: url(/mark-light.svg);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #1a1b1d;
    --surface:   #242628;
    --text:      #f5f6f7;
    --muted:     #9aa0a6;
    --border:    rgba(255, 255, 255, .12);

    --accent:    #79c7e3;
    --accent-hi: #a2daee;
    --success:   #5fd39a;
    --danger:    #ff7b72;

    --shadow:    0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .35);

    --mark: url(/mark-dark.svg);
  }
}

:root[data-theme="dark"] {
  --bg:        #1a1b1d;
  --surface:   #242628;
  --text:      #f5f6f7;
  --muted:     #9aa0a6;
  --border:    rgba(255, 255, 255, .12);

  --accent:    #79c7e3;
  --accent-hi: #a2daee;
  --success:   #5fd39a;
  --danger:    #ff7b72;

  --shadow:    0 1px 2px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .35);

  --mark: url(/mark-dark.svg);
}