/* Shared service-page colors, based on the homepage. Artwork and layout stay in page CSS. */
body.palette-unified {
  --bg: #0b0e1a;
  --panel: #141833;
  --text: #f8f9ff;
  --muted: #c7cbe3;
  --accent: #c9bcff;
  --line: #3d437a;
  --palette-surface: linear-gradient(135deg, #1b2042f2, #141833f5);
  --palette-selected: #232a5a;
  --palette-field: #101325;
  --palette-border: #5a63a9;
  --brass: #c9bcff;
  --violet: #8f8cf0;
  --text-dim: #c7cbe3;
  --border: #3d437a;
  background-color: var(--bg);
  color: var(--text);
  color-scheme: dark;
}

body.palette-unified :is(.spread, .dlg-guide, .spread-helper, .promo-card, .dict-item,
  .sign, .forecast-box, .topic-grid button, .year-card, .calendar-panel, .day-panel,
  .phase-guide article, .tool-card, .step, .masters, .meaning-row, .meaning-result,
  .note-grid aside, .form-grid form, .form-grid aside, .result-card,
  .form-layout form, .reading-panel, .nc-card, .nc-note-card, .cab-card) {
  background: var(--palette-surface);
  border-color: var(--line);
  color: var(--text);
  box-shadow: inset 0 1px 0 #c9bcff0d;
}

body.palette-unified :is(.faq details, dialog) {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
}

body.palette-unified :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]), select, textarea) {
  background: var(--palette-field);
  color: var(--text);
  border-color: var(--palette-border);
}
body.palette-unified :is(input, textarea)::placeholder { color: #96a0c8; }
body.palette-unified :is(input, select, textarea) { accent-color: var(--accent); }
body.palette-unified :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

body.palette-unified .button {
  background: linear-gradient(115deg, #d2c7ff, #b7a1fb);
  border-color: var(--accent);
  color: #15122c;
  box-shadow: 0 0 24px #8f6fff19;
}
body.palette-unified .button:hover { background: #d6cbff; box-shadow: 0 0 28px #a88bff44; }
body.palette-unified :is(.button.outline, .secondary, .outline, .reading-tabs button, .periods button, .number-buttons button) {
  background: #0b0e1a66;
  border-color: #9184b9;
  color: var(--text);
  box-shadow: none;
}
body.palette-unified :is(.reading-tabs, .periods, .number-buttons) button[aria-pressed=true] {
  background: var(--accent);
  border-color: var(--accent);
  color: #15122c;
}
body.palette-unified :is(.sign:hover, .sign[aria-pressed=true], .topic-grid button[aria-pressed=true], .tool-card:hover, .days button[aria-pressed=true]) {
  background: var(--palette-selected);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 20px #8f6fff19;
}
body.palette-unified :is(.spread:hover, .secondary:hover, .outline:hover) { border-color: var(--accent); }

body.palette-unified :is(.nc-card-icon, .nc-note-icon) { color: var(--accent); border-color: var(--palette-border); }
body.palette-unified :is(.nc-lead, .divider, .side-label, .sign .num, .text-button) { color: var(--accent); }
body.palette-unified :is(.eyebrow, .nc-card .eyebrow, .demo, .fine, .nc-note-copy p, .nc-note-card p) { color: var(--muted); }
body.palette-unified :is(.nc-note-copy blockquote, .reading-panel p, .meaning-result p) { color: var(--text); }
body.palette-unified :is(.nc-note-badge, .promo-card .badge b), body.palette-unified .year-card::after {
  background: var(--accent);
  color: #15122c;
}
body.palette-unified :is(.notice, .prompt) { border-color: var(--palette-border); }
body.palette-unified .notice { background: #c9bcff0d; }
body.palette-unified > footer { border-top-color: var(--line); color: var(--muted); }

/* Keep secondary controls and small print in the same cool color family. */
body.palette-unified :is(.sign small, .sign .element, .tool-card p, .step p,
  .form-grid label, .form-layout label, .nc-badges, .finder, .phase-guide p) { color: var(--muted); }
body.palette-unified :is(.card-link, .example-link, .nc-note-copy .fine a) { color: var(--accent); }
body.palette-unified :is(.calendar-panel, .day-panel, .reading-panel, .forecast-box) {
  box-shadow: inset 0 1px 0 #c9bcff12, 0 12px 32px #05081726;
}
body.palette-unified .days button:hover { background: #232a5a80; }
body.palette-unified .days button[aria-pressed=true] { background: var(--palette-selected); }
body.palette-unified .precision label:has(input:checked) { background: #c9bcff12; border-color: var(--accent); }