/* Semantic RGB tokens shared by every UI surface. Keep swatch colors literal. */
:root,
[data-theme="iris"] {
  --accent: 182 162 242;
  --secondary: 160 234 240;
  --text: 242 238 249;
  --muted: 159 149 178;
  --surface: 17 14 25;
  --background: 6 7 9;
}
[data-theme="glacier"] {
  --accent: 160 234 240;
  --secondary: 155 246 207;
  --text: 231 247 249;
  --muted: 142 173 182;
  --surface: 12 23 28;
  --background: 5 9 12;
}
[data-theme="ember"] {
  --accent: 243 177 125;
  --secondary: 233 143 202;
  --text: 255 240 226;
  --muted: 184 156 142;
  --surface: 27 17 14;
  --background: 12 7 6;
}
:root {
  color: rgb(var(--text));
  background: rgb(var(--background));
  accent-color: rgb(var(--accent));
}
::selection {
  background: rgb(var(--accent) / 0.3);
  color: rgb(var(--text));
}
h1 em,
.cross,
.menu-arrow {
  color: rgb(var(--accent));
}
.eyebrow,
main p,
.edition,
.instruction,
.muted,
.footnote,
.menu-intro,
.menu-coordinate,
.menu-index,
.menu-link-title small,
.menu-bottom,
.menu-bottom > span:last-child {
  color: rgb(var(--muted));
}
.dot {
  background: rgb(var(--secondary));
  box-shadow: 0 0 12px rgb(var(--secondary) / 0.45);
}
.divider,
.footnote span {
  color: rgb(var(--muted) / 0.5);
}
.controls {
  background: rgb(var(--surface) / 0.75);
  border-color: rgb(var(--accent) / 0.2);
}
button {
  color: rgb(var(--muted));
}
button:hover {
  color: rgb(var(--text));
  background: rgb(var(--accent) / 0.06);
}
button.selected,
#menu-moods button[aria-pressed="true"] {
  color: rgb(var(--text));
  background: rgb(var(--accent) / 0.12);
  border-color: rgb(var(--accent) / 0.25);
}
button:focus-visible,
a:focus-visible {
  outline-color: rgb(var(--accent));
}
.control-divider {
  background: rgb(var(--accent) / 0.16);
}
.menu-shell {
  border-color: rgb(var(--accent) / 0.25);
  background:
    linear-gradient(135deg, rgb(var(--accent) / 0.07), transparent 50%),
    rgb(var(--surface) / 0.88);
  box-shadow:
    0 5px 30px #0004,
    inset 0 1px 0 rgb(var(--accent) / 0.12);
}
.menu-shell:before {
  background: radial-gradient(
    250px circle at var(--light-x) var(--light-y),
    rgb(var(--accent) / 0.1),
    transparent 80%
  );
}
.menu-open .menu-shell {
  background:
    linear-gradient(135deg, rgb(var(--accent) / 0.1), transparent 65%),
    rgb(var(--surface) / 0.92);
  box-shadow:
    0 25px 100px #0009,
    0 0 70px rgb(var(--accent) / 0.06),
    inset 0 1px 0 rgb(var(--accent) / 0.18);
}
.menu-orbit i {
  border-color: rgb(var(--accent) / 0.75);
  box-shadow: 0 0 8px rgb(var(--accent) / 0.2);
}
.menu-orbit i:nth-child(2) {
  border-color: rgb(var(--secondary) / 0.75);
}
.menu-orbit i:nth-child(3) {
  border-color: rgb(var(--text) / 0.65);
}
.menu-wordmark,
.menu-bar #menu-toggle,
.menu-link-title {
  color: rgb(var(--text));
}
.menu-symbol i {
  background: rgb(var(--text));
}
.menu-veil {
  background: rgb(var(--background) / 0.45);
}
.menu-intro,
.menu-link {
  border-color: rgb(var(--accent) / 0.13);
}
.menu-link:hover .menu-link-title {
  color: rgb(var(--text));
}
.menu-link:hover .menu-arrow {
  color: rgb(var(--secondary));
}
.menu-bottom i {
  background: rgb(var(--accent));
  box-shadow: 0 0 7px rgb(var(--accent));
}
#menu-moods button {
  border-color: rgb(var(--accent) / 0.15);
}
#fallback {
  color: rgb(var(--text));
  background: rgb(var(--surface));
  border-color: rgb(var(--accent));
}