/* Color themes: shared semantic colors recolor every reading surface. */
html[data-palette="ocean"] {
  --canvas: #eaf3fc;
  --paper: #f8fbff;
  --surface: #ffffff;
  --paper-deep: #dceafb;
  --paper-hover: #edf4ff;
  --edge: #153b66;
  --edge-lift: #245483;
  --soft: #465f7c;
  --mustard: #ffd568;
  --mustard-deep: #996b13;
  --tomato: #a02c3d;
  --leaf: #236c55;
}
html[data-palette="meadow"] {
  --canvas: #edf5ee;
  --paper: #fbfefa;
  --surface: #ffffff;
  --paper-deep: #dfeee2;
  --paper-hover: #edf7e9;
  --edge: #204d3c;
  --edge-lift: #32634e;
  --soft: #415a4b;
  --mustard: #ffc896;
  --mustard-deep: #98603a;
  --tomato: #9c3037;
  --leaf: #286348;
}
html[data-palette="berry"] {
  --canvas: #faf0f5;
  --paper: #fffbfd;
  --surface: #ffffff;
  --paper-deep: #f3e0eb;
  --paper-hover: #fce8f2;
  --edge: #542744;
  --edge-lift: #713b5d;
  --soft: #78546b;
  --mustard: #f5da78;
  --mustard-deep: #926916;
  --tomato: #a43155;
  --leaf: #287353;
}
html[data-palette="ink"] {
  --canvas: #f0f3f8;
  --paper: #ffffff;
  --surface: #ffffff;
  --paper-deep: #e1e7f1;
  --paper-hover: #edf2fc;
  --edge: #202e48;
  --edge-lift: #334769;
  --soft: #46536c;
  --mustard: #bcd0ff;
  --mustard-deep: #3454ab;
  --tomato: #9e293c;
  --leaf: #267052;
}

/* Override the warm dark defaults only when a different palette is selected. */
html[data-palette="ocean"][data-color-scheme="dark"] {
  --canvas: #152233; --paper: #1c2d43; --surface: #233750;
  --paper-deep: #18283b; --paper-hover: #293e58;
  --edge: #e1edff; --edge-lift: #f3f7ff; --soft: #afc3df;
  --outline: #718eaf; --shadow: #0c1623;
  --mustard: #554721; --mustard-deep: #ffd568;
  --tomato: #ff9eac; --leaf: #80cfae; --rule: #435d7c;
}
html[data-palette="meadow"][data-color-scheme="dark"] {
  --canvas: #182a23; --paper: #20382d; --surface: #294236;
  --paper-deep: #1a3026; --paper-hover: #324e3e;
  --edge: #e1f2e5; --edge-lift: #f3fff4; --soft: #b1ccbb;
  --outline: #789b84; --shadow: #0d1b14;
  --mustard: #634631; --mustard-deep: #ffc896;
  --tomato: #ffa4a8; --leaf: #88d6a7; --rule: #4b6b57;
}
html[data-palette="berry"][data-color-scheme="dark"] {
  --canvas: #2d1c2a; --paper: #3b2636; --surface: #462e40;
  --paper-deep: #32202e; --paper-hover: #51364a;
  --edge: #f8e5f0; --edge-lift: #fff4fa; --soft: #d6b7cd;
  --outline: #ac7f9f; --shadow: #1c0f19;
  --mustard: #584c27; --mustard-deep: #f5da78;
  --tomato: #ffabc6; --leaf: #8cd6ae; --rule: #76536c;
}
html[data-palette="ink"][data-color-scheme="dark"] {
  --canvas: #191e29; --paper: #232b3b; --surface: #2c3548;
  --paper-deep: #1d2432; --paper-hover: #34405a;
  --edge: #e7edff; --edge-lift: #f5f7ff; --soft: #b7c3df;
  --outline: #8192b8; --shadow: #10141e;
  --mustard: #344a79; --mustard-deep: #bcd0ff;
  --tomato: #ffa0ae; --leaf: #8bd5b2; --rule: #4d5c7d;
}
html[data-palette]:not([data-palette="picnic"]) {
  --check: color-mix(in srgb, var(--tomato) 20%, transparent);
}
html[data-palette]:not([data-palette="picnic"]):not([data-color-scheme="dark"]) {
  --outline: var(--edge); --shadow: var(--edge);
  --rule: color-mix(in srgb, var(--edge) 26%, transparent);
}

.appearance { position: relative; flex: none; }
.appearance-toggle {
  display: grid; place-items: center; width: var(--control-size); height: var(--control-size);
  border: 0; padding: 0; background: none; color: var(--soft); cursor: pointer;
  transition: color .15s, background .15s;
}
.appearance-toggle:hover, .appearance-toggle[aria-expanded="true"] { color: var(--edge); background: var(--paper-deep); }
.appearance-toggle svg { width: 22px; height: 22px; }
.appearance-panel {
  position: fixed; inset: auto; top: 72px; right: 16px; margin: 0;
  width: min(304px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 18px; border: 2px solid var(--outline); background: var(--paper); color: var(--edge);
  box-shadow: 4px 4px 0 var(--shadow);
}
/* Keep the picker anchored to its trigger while using native light-dismiss/Escape. */
.appearance-panel:popover-open { position: fixed; }
.appearance-panel fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.appearance-panel legend { padding: 0; font-size: var(--text-body); font-weight: var(--weight-heading); }
.appearance-hint { margin: 4px 0 14px; font-size: var(--text-caption); color: var(--soft); }
.palette-options { display: grid; gap: 8px; }
.palette-option {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 62px;
  padding: 10px; border: 1px solid var(--rule); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.palette-option:hover { background: var(--paper-deep); }
.palette-option:has(input:checked) { background: var(--paper-hover); border-color: var(--edge); }
.palette-option:has(input:focus-visible) { outline: 3px solid var(--edge); outline-offset: 2px; }
.palette-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.palette-swatch { display: flex; flex: none; width: 48px; height: 32px; border: 1px solid var(--outline); overflow: hidden; }
.palette-swatch i { flex: 1; }
.palette-swatch i:first-child { flex: 2; }
.palette-copy { display: grid; gap: 2px; flex: 1; }
.palette-copy strong { font-size: var(--text-label); font-weight: var(--weight-heading); }
.palette-copy small { font-size: var(--text-caption); color: var(--soft); }
.palette-check { width: 18px; height: 18px; visibility: hidden; }
.palette-option:has(input:checked) .palette-check { visibility: visible; }
.appearance-panel .appearance-mode { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.appearance-mode legend { float: left; width: 100%; margin-bottom: 8px; font-size: var(--text-label); }
.appearance-mode-options { clear: both; display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--edge); }
.appearance-mode-options button {
  min-height: 40px; padding: 0; border: 0; background: none; color: var(--edge);
  font: inherit; font-size: var(--text-label); font-weight: var(--weight-heading); cursor: pointer;
}
.appearance-mode-options button + button { border-left: 2px solid var(--edge); }
.appearance-mode-options button:hover { background: var(--paper-deep); }
.appearance-mode-options button[aria-pressed="true"] { color: var(--paper); background: var(--edge); }
.appearance-mode-options button:focus-visible { outline: 3px solid var(--edge); outline-offset: 2px; }
@media (max-width: 640px) {
  .appearance-panel { position: fixed; top: 72px; right: 16px; max-height: calc(100dvh - 88px); }
  .appearance-panel:popover-open { position: fixed; }
}