/* Visitor-selectable colour palettes. Classic is the default (no data-palette). */

/* ocean */
:root[data-palette="ocean"] {
  color-scheme: light;
  --bg: #e1efec;
  --surface: #d2e6e2;
  --fg: #0d2526;
  --muted: #4f6b6a;
  --line: #c3dad5;
  --accent: #0f7f80;
  --term-bg: #0d2526;
  --term-accent: #4fd1c5;
  --term-line: transparent;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="ocean"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #071a1b;
    --surface: #0e2627;
    --fg: #e2f1ef;
    --muted: #85a5a3;
    --line: #173537;
    --accent: #4fd1c5;
    --term-bg: #0c2324;
    --term-accent: #4fd1c5;
    --term-line: #1d3f41;
  }
}

:root[data-palette="ocean"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #071a1b;
  --surface: #0e2627;
  --fg: #e2f1ef;
  --muted: #85a5a3;
  --line: #173537;
  --accent: #4fd1c5;
  --term-bg: #0c2324;
  --term-accent: #4fd1c5;
  --term-line: #1d3f41;
}

/* sage */
:root[data-palette="sage"] {
  color-scheme: light;
  --bg: #e0e8d4;
  --surface: #d3ddc4;
  --fg: #1a2418;
  --muted: #55634f;
  --line: #c6d1b6;
  --accent: #4d7a3a;
  --term-bg: #1a2418;
  --term-accent: #a8d08d;
  --term-line: transparent;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="sage"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121711;
    --surface: #1a2119;
    --fg: #e7ede0;
    --muted: #96a28e;
    --line: #283126;
    --accent: #a8d08d;
    --term-bg: #182016;
    --term-accent: #a8d08d;
    --term-line: #2b3529;
  }
}

:root[data-palette="sage"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #121711;
  --surface: #1a2119;
  --fg: #e7ede0;
  --muted: #96a28e;
  --line: #283126;
  --accent: #a8d08d;
  --term-bg: #182016;
  --term-accent: #a8d08d;
  --term-line: #2b3529;
}

/* terracotta */
:root[data-palette="terracotta"] {
  color-scheme: light;
  --bg: #f3e2d0;
  --surface: #e9d4be;
  --fg: #2a1c13;
  --muted: #735c4b;
  --line: #dcc5ac;
  --accent: #c0532f;
  --term-bg: #2a1c13;
  --term-accent: #f0a07c;
  --term-line: transparent;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="terracotta"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #18110d;
    --surface: #221913;
    --fg: #f3e7da;
    --muted: #a8968a;
    --line: #33271f;
    --accent: #ee8a63;
    --term-bg: #201712;
    --term-accent: #ee8a63;
    --term-line: #3a2c22;
  }
}

:root[data-palette="terracotta"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #18110d;
  --surface: #221913;
  --fg: #f3e7da;
  --muted: #a8968a;
  --line: #33271f;
  --accent: #ee8a63;
  --term-bg: #201712;
  --term-accent: #ee8a63;
  --term-line: #3a2c22;
}

/* plum */
:root[data-palette="plum"] {
  color-scheme: light;
  --bg: #ede5f8;
  --surface: #e1d6f2;
  --fg: #1c1430;
  --muted: #625879;
  --line: #d4c7e8;
  --accent: #6d42c9;
  --term-bg: #1c1430;
  --term-accent: #b79cff;
  --term-line: transparent;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="plum"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #110c1b;
    --surface: #1a1427;
    --fg: #ece6f7;
    --muted: #9d93b3;
    --line: #2a2140;
    --accent: #b79cff;
    --term-bg: #181225;
    --term-accent: #b79cff;
    --term-line: #2f2547;
  }
}

:root[data-palette="plum"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #110c1b;
  --surface: #1a1427;
  --fg: #ece6f7;
  --muted: #9d93b3;
  --line: #2a2140;
  --accent: #b79cff;
  --term-bg: #181225;
  --term-accent: #b79cff;
  --term-line: #2f2547;
}

/* cobalt */
:root[data-palette="cobalt"] {
  color-scheme: light;
  --bg: #dfe5ff;
  --surface: #cfd9fd;
  --fg: #0c1a5b;
  --muted: #465591;
  --line: #bfcdf7;
  --accent: #2347e6;
  --term-bg: #0c1a5b;
  --term-accent: #ffd166;
  --term-line: transparent;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="cobalt"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1550;
    --surface: #13206a;
    --fg: #eef1ff;
    --muted: #a5b1e6;
    --line: #22318a;
    --accent: #ffd166;
    --term-bg: #0e1a60;
    --term-accent: #ffd166;
    --term-line: #2a3a96;
  }
}

:root[data-palette="cobalt"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1550;
  --surface: #13206a;
  --fg: #eef1ff;
  --muted: #a5b1e6;
  --line: #22318a;
  --accent: #ffd166;
  --term-bg: #0e1a60;
  --term-accent: #ffd166;
  --term-line: #2a3a96;
}

/* butter */
:root[data-palette="butter"] {
  color-scheme: light;
  --bg: #f7e5ab;
  --surface: #efd995;
  --fg: #1f1a0c;
  --muted: #665b3c;
  --line: #e2cb84;
  --accent: #c2410c;
  --term-bg: #1f1a0c;
  --term-accent: #ffb347;
  --term-line: transparent;
}

@media (prefers-color-scheme: dark) {
  :root[data-palette="butter"]:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #16130a;
    --surface: #201b0f;
    --fg: #f6ecc9;
    --muted: #a99f82;
    --line: #312a16;
    --accent: #ffc24b;
    --term-bg: #1d190d;
    --term-accent: #ffc24b;
    --term-line: #3a321b;
  }
}

:root[data-palette="butter"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #16130a;
  --surface: #201b0f;
  --fg: #f6ecc9;
  --muted: #a99f82;
  --line: #312a16;
  --accent: #ffc24b;
  --term-bg: #1d190d;
  --term-accent: #ffc24b;
  --term-line: #3a321b;
}

/* Palette list (inside the colour menu) */
.palette-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  text-align: left;
}

.swatch {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  outline: 1px solid var(--line);
  background: linear-gradient(135deg, var(--sw-bg) 50%, var(--sw-accent) 50%);
}

.palette-list button[aria-checked="true"] .swatch {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.palette-list button[aria-checked="true"]::after {
  content: "✓";
  margin-left: auto;
  color: var(--muted);
}