/* Shared text and accent colours on warm cream surfaces. */
:root {
  --paper: #faf3db;
  --paper-light: var(--paper);
  --ink: #292b35;
  --muted: var(--ink);
  --line: color-mix(in srgb, var(--ink) 22%, transparent);
  --teal: #006e75;
  --magenta: #a51c76;
  --red: #b92d25;
  --ochre: #87530f;
  --indigo: #302a7b;
  --maroon: #722f37;
  --gold: var(--ochre);
  --surface-soft: color-mix(in srgb, var(--paper) 96%, var(--ochre));
  --surface-warm: color-mix(in srgb, var(--paper) 92%, var(--ochre));
  --surface-teal: color-mix(in srgb, var(--paper) 96%, var(--teal));
  --surface-blush: color-mix(in srgb, var(--paper) 96%, var(--magenta));
  --panel-shadow: 0 8px 20px color-mix(in srgb, var(--ink) 5%, transparent);
}

::selection { background: var(--indigo); color: var(--paper); }
button:focus-visible, a:focus-visible, textarea:focus-visible,
input:focus-visible, select:focus-visible, [tabindex="0"]:focus-visible,
.backcover-description summary:focus-visible,
.chapter-toolbar input:focus-visible, .chapter-toolbar select:focus-visible {
  outline-color: var(--magenta);
}
.brand-mark { border-color: var(--magenta); }
.brand-mark:after { border-color: var(--teal); }
nav a:hover, .text-link:hover { color: var(--magenta); }
.nav-notebook { border-color: var(--ochre); }
.header nav > a { display: flex; align-items: center; line-height: 18px; }
.header nav > a span { line-height: 18px; }
.nav-notebook span, .small-line { color: var(--red); }
.small-line { background: var(--red); }
h1 { color: var(--ink); }
h1 em { color: var(--red); }
.title-period, .tiny-orbit { color: var(--gold); }
.dark { background: var(--teal); color: var(--paper-light); }
.dark:hover { background: var(--indigo); }
.hero .dark { background: var(--teal); }
.hero .dark:hover { background: var(--indigo); }
.hero-secondary { color: var(--magenta); }
.book-gallery {
  background: var(--surface-warm);
  border: 1px solid var(--line);
}
.book-gallery::before { content: none; }
.book-gallery .art-topline { color: var(--indigo); }
.cover-controls { border-color: var(--teal); background-color: var(--paper); }
.cover-controls button[aria-selected="true"] { background: var(--indigo); color: var(--paper-light); }
.cover-controls button:hover[aria-selected="false"] { background: var(--teal); color: var(--paper); }
.cover-enlarge { color: var(--teal); }

#about { --section-colour: var(--magenta); }
#chapters { --section-colour: var(--teal); }
#passages { --section-colour: var(--indigo); }
#themes { --section-colour: var(--red); }
#explore { --section-colour: var(--ochre); }
#author { --section-colour: var(--magenta); }
#about h2 em, #chapters h2 em, #passages h2 em,
#themes h2 em, #explore h2 em, #author h2 em,
.section-label > span:first-child { color: var(--section-colour, var(--teal)); }
.backcover-description { background: var(--surface-blush); }
.backcover-description summary { color: var(--magenta); padding-inline: 20px; }
.backcover-description blockquote { padding-inline: 20px; }
.backcover-description summary > span { color: var(--red); }

.chapter-toolbar input, .chapter-toolbar select { border-color: var(--teal); background: var(--surface-teal); }
.chapter-toolbar label, .chapter-detail-top .eyebrow { color: var(--teal); }
.chapter-browser { box-shadow: var(--panel-shadow); }
.chapter-list { scrollbar-color: var(--teal) transparent; background: var(--surface-teal); }
.chapter-detail, .chapter-empty { background: var(--surface-soft); }
.chapter-choice { border-bottom-color: var(--line); }
.chapter-choice[aria-pressed="true"] { background: var(--teal); color: var(--paper-light); }
.chapter-choice[aria-pressed="true"] > span:last-child { color: var(--paper-light); }
.chapter-choice[aria-pressed="true"]:focus-visible { outline-color: var(--paper); }
.chapter-choice:hover[aria-pressed="false"] { background: var(--indigo); color: var(--paper); }
.chapter-choice:hover[aria-pressed="false"] > span:last-child { color: var(--paper); }
.chapter-question .eyebrow { color: var(--magenta); }
.chapter-detail > .text-link, #reset-chapters, #empty-reset { color: var(--teal); }

.passage-section { background: var(--surface-soft); border-block: 1px solid var(--line); }
.passage-tabs { border-color: var(--line); }
.passage-tabs > button[data-passage="0"], #passage-panel[aria-labelledby="passage-tab-0"] { --thread-colour: var(--teal); }
.passage-tabs > button[data-passage="1"], #passage-panel[aria-labelledby="passage-tab-1"] { --thread-colour: var(--magenta); }
.passage-tabs > button[data-passage="2"], #passage-panel[aria-labelledby="passage-tab-2"] { --thread-colour: var(--ochre); }
.passage-tabs > button[data-passage="3"], #passage-panel[aria-labelledby="passage-tab-3"] { --thread-colour: var(--indigo); }
.passage-tabs > button { color: var(--thread-colour); }
.passage-tabs > button[aria-selected="true"] { color: var(--thread-colour); border-color: var(--thread-colour); }
.passage-tabs > button:hover { background-color: var(--thread-colour); color: var(--paper); }
.passage-panel { background: var(--paper-light); border: 1px solid var(--line); box-shadow: var(--panel-shadow); }
.passage-quote-mark { color: var(--thread-colour, var(--magenta)); }
.passage-source, .passage-reading-note .eyebrow,
#passage-reveal, #passage-reflect { color: var(--thread-colour, var(--indigo)); }
.passage-panel > .passage-find { color: var(--indigo); }

[data-word="consciousness"], #word-panel[aria-labelledby="word-consciousness"] { --thread-colour: var(--teal); }
[data-word="faith"], #word-panel[aria-labelledby="word-faith"] { --thread-colour: var(--magenta); }
[data-word="creativity"], #word-panel[aria-labelledby="word-creativity"] { --thread-colour: var(--ochre); }
[data-word="existence"], #word-panel[aria-labelledby="word-existence"] { --thread-colour: var(--indigo); }
.word-select button[aria-selected="false"],
.word-select button[aria-selected="true"], .word-select button:hover {
  color: var(--thread-colour);
}
.word-number, .word-plus { color: var(--thread-colour); }
.word-select button { padding-inline: 16px; }
.word-select button[aria-selected="true"] { background: color-mix(in srgb, var(--paper) 96%, var(--thread-colour)); }
.word-select button[aria-selected="true"] .word-number { color: var(--red); }
.word-panel { border-color: var(--thread-colour, var(--teal)); background: var(--surface-soft); padding: 30px 32px; }
.word-panel .eyebrow, #word-reflect { color: var(--thread-colour, var(--teal)); }

.explore-section { background: var(--surface-soft); border-top: 1px solid var(--line); }
.prompt-panel { background: var(--surface-warm); border: 1px solid var(--line); box-shadow: var(--panel-shadow); }
[data-stage="before"], #prompt-panel[aria-labelledby="stage-before"] { --stage-colour: var(--teal); }
[data-stage="during"], #prompt-panel[aria-labelledby="stage-during"] { --stage-colour: var(--red); }
[data-stage="after"], #prompt-panel[aria-labelledby="stage-after"] { --stage-colour: var(--indigo); }
.stage-list, .stage-list button { border-color: var(--line); }
.stage-list button { opacity: 1; padding-inline: 14px; }
.stage-list button[aria-selected="true"] { border-color: var(--stage-colour); background: color-mix(in srgb, var(--paper) 96%, var(--stage-colour)); }
.stage-list button[aria-selected="true"] strong,
.stage-list button[aria-selected="true"] .stage-num,
.stage-list button[aria-selected="true"] .stage-arrow { color: var(--stage-colour); }
.stage-num { color: var(--muted); }
.prompt-symbol { color: var(--gold); }
.prompt-top .eyebrow, #reflect-prompt { color: var(--stage-colour, var(--teal)); }
.prompt-paging button { color: var(--indigo); border-color: var(--indigo); }
.prompt-paging button:hover { background: var(--indigo); color: var(--paper); }
.progress-track { background: var(--line); }
.explore-bottom { justify-content: flex-end; }
.progress-track > span { background: var(--red); }

.notebook-section button:focus-visible,
.notebook-section textarea:focus-visible { outline-color: var(--paper); }
.notebook-section textarea { background: color-mix(in srgb, var(--teal) 92%, var(--ink)); padding: 16px; }
.note-entry { background: color-mix(in srgb, var(--teal) 92%, var(--ink)); padding: 20px; margin-top: 12px; }

.author-portrait:before { border-color: var(--gold); background: var(--surface-warm); }
.author-copy > .author-perspective { background: var(--surface-blush); border-top: 0; border-left: 2px solid var(--magenta); padding: 18px 20px; }
.author-portrait figcaption, .author-copy > .eyebrow { color: var(--magenta); }
.author-portrait figcaption span { color: var(--red); }
.closing h2 em, .closing .eyebrow { color: var(--indigo); }
.closing-link { color: var(--red); border-color: var(--red); }
.closing-link:hover { background: var(--red); color: var(--paper); }
.cover-close { color: var(--indigo); border-color: var(--indigo); }
.cover-close:hover { background: var(--indigo); color: var(--paper); }
dialog::backdrop { background: color-mix(in srgb, var(--indigo) 80%, transparent); }
dialog { background: var(--surface-soft); }
#purchase { background: var(--surface-soft); border-block: 1px solid var(--line); }
#purchase .purchase-cover { background: var(--surface-warm); border: 1px solid var(--line); }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ui-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.button .ui-icon { width: 20px; height: 14px; }
.text-link .ui-icon { width: 17px; height: 14px; }
.notebook-link > span { display: inline-flex; vertical-align: middle; }
.intro-line > span:last-child span { display: inline-flex; vertical-align: middle; }

.brand-image {
  display: block;
  width: 72px;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
}
@media (max-width: 760px) {
  .brand-image { width: 52px; }
  .word-panel { padding: 24px; }
  .word-select button { padding-inline: 8px; }
  .stage-list button { padding-inline: 0; }
}