/* Themes are attribute selectors rather than :root-only so the theme picker's
   swatches can preview any theme by carrying their own data-theme. Each theme sets
   its palette once; the dark variant only overrides surfaces, text, and accent. */
[data-theme="classic"] {
  --bg: #f4f1ea;
  --surface: #e4dfd4;
  --well: #d6d0c3;
  --text: #23211d;
  --muted: #7b7468;
  --accent: #d9405a;
  --button: #2a7fd4;
  --p0: #f39a32;
  --p1: #3f9df5;
  --p2: #4cc46a;
  --p3: #ec5466;
  --p4: #9d6ff0;
  --p5: #22c3b6;
  --p6: #f2c934;
}

[data-theme="classic"][data-scheme="dark"] {
  --bg: #14161c;
  --surface: #1d2029;
  --well: #272b36;
  --text: #eceef3;
  --muted: #8a90a0;
  --accent: #ef5b6c;
}

[data-theme="blossom"] {
  --bg: #fbf0f5;
  --surface: #f3dcea;
  --well: #e8c8dc;
  --text: #3a1f35;
  --muted: #946f8a;
  --accent: #d12f7f;
  --button: #a640d0;
  --p0: #ff8fab;
  --p1: #9b6bff;
  --p2: #e05bd0;
  --p3: #ff5c8a;
  --p4: #6e5ff0;
  --p5: #c79bff;
  --p6: #ffb8d4;
}

[data-theme="blossom"][data-scheme="dark"] {
  --bg: #1b1220;
  --surface: #28192f;
  --well: #34233d;
  --text: #f7e9f3;
  --muted: #a88ea8;
  --accent: #ff5fa2;
}

[data-theme="ocean"] {
  --bg: #eef5f8;
  --surface: #d8e7ee;
  --well: #c5dae4;
  --text: #13303d;
  --muted: #5e7e8b;
  --accent: #e0533d;
  --button: #1f78b4;
  --p0: #2f8fd8;
  --p1: #22b8b0;
  --p2: #5fd1e8;
  --p3: #ff7f6b;
  --p4: #3b62d6;
  --p5: #7ad9b5;
  --p6: #ffc65c;
}

[data-theme="ocean"][data-scheme="dark"] {
  --bg: #0d1a22;
  --surface: #13252f;
  --well: #1c323e;
  --text: #e4f1f6;
  --muted: #7c9aa6;
  --accent: #ff7a63;
}

[data-theme="grove"] {
  --bg: #f1f3ea;
  --surface: #dfe5d2;
  --well: #cfd7bf;
  --text: #23301c;
  --muted: #6f7b61;
  --accent: #b86a12;
  --button: #3d7d3a;
  --p0: #6fae4b;
  --p1: #2f8f5b;
  --p2: #c4b23c;
  --p3: #d9873e;
  --p4: #4d9b8f;
  --p5: #9cc97f;
  --p6: #b8664a;
}

[data-theme="grove"][data-scheme="dark"] {
  --bg: #12170f;
  --surface: #1b2316;
  --well: #26301f;
  --text: #e8eedf;
  --muted: #8a967c;
  --accent: #e3a144;
}

[data-theme="ember"] {
  --bg: #fbf1e8;
  --surface: #f1dccb;
  --well: #e7cbb5;
  --text: #3b2216;
  --muted: #977360;
  --accent: #d6283c;
  --button: #cf4a24;
  --p0: #ff7a3d;
  --p1: #ffb02e;
  --p2: #e8484f;
  --p3: #ff5f8f;
  --p4: #f5d547;
  --p5: #c2553a;
  --p6: #ff9a76;
}

[data-theme="ember"][data-scheme="dark"] {
  --bg: #1c120d;
  --surface: #2a1b13;
  --well: #37251b;
  --text: #f7e9df;
  --muted: #a88b79;
  --accent: #ff4d5e;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s, color 0.3s;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.icon-button {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
}

.icon-button svg { width: 20px; height: 20px; }

.c0 { --block: var(--p0); }
.c1 { --block: var(--p1); }
.c2 { --block: var(--p2); }
.c3 { --block: var(--p3); }
.c4 { --block: var(--p4); }
.c5 { --block: var(--p5); }
.c6 { --block: var(--p6); }

.block {
  border-radius: 4px;
  background: var(--block);
  box-shadow:
    inset 0 -3px 0 rgb(0 0 0 / 0.18),
    inset 0 2px 0 rgb(255 255 255 / 0.28);
}

/* The menu anchors to the nearest positioned ancestor, so put it inside one (e.g. a header). */
#appearance-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  width: min(320px, calc(100vw - 32px));
  padding: 14px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.25);
  animation: appearance-fade 0.15s ease-out;
}

#appearance-menu[hidden] { display: none; }

#appearance-menu .label { margin-bottom: 8px; }

.theme-options {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.swatch {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 4px 6px;
  border: 0;
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
}

.swatch[aria-pressed="true"] { outline: 2px solid var(--text); outline-offset: 1px; }

.swatch-blocks {
  display: grid;
  grid-template-columns: repeat(2, 12px);
  grid-auto-rows: 12px;
  gap: 2px;
}

.swatch-blocks span { border-radius: 3px; }

.segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  border-radius: 10px;
  background: var(--well);
}

.segmented button {
  padding: 7px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.segmented button[aria-pressed="true"] {
  background: var(--bg);
  color: var(--text);
}

@keyframes appearance-fade {
  from { opacity: 0; }
}