/* One palette for every page, including the native GPS interface. */
:root,
html[data-theme="light"] {
  color-scheme: light;
  --background: #F4F5EF;
  --surface: #FAFBF7;
  --raised: #E7EBDF;
  --text: #202522;
  --muted: #55604D;
  --gold: #796137;
  --gold-active: #65512F;
  --border: #CFD6C6;
  --control: #8E9C80;
  --error: #A53F32;
  --success: #38644C;
  --ink: #171A18;
  --background-rgb: 244, 245, 239;
  --surface-rgb: 250, 251, 247;
  --shadow-rgb: 41, 57, 30;
  --accent-soft: #E9EDDF;
  --gps-accent: #4B6136;
  --gps-accent-text: #FFFFFF;
  --gps-choice-bg: #FFFFFF99;
  --gps-choice-selected: #EDF1E3;
  --gps-choice-line: #859566;
  --gps-scene-top: #EEF1ED;
  --gps-scene-center: #FAF9F1;
  --gps-scene-bottom: #E4E8DE;
  --gps-sky: #FFFDF6A8;
  --gps-arrow: #4E6633;
  --gps-arrow-shadow: #4E663344;
  --action-bg: #242B23;
  --action-hover: #414C39;
  --action-text: #FAFBF6;
  --warning-surface: #FFF5DF;
  --warning-text: #795325;
  --specimen-bg: #F3EFE5;
  --specimen-text: #171A18;
  --specimen-muted: #414B43;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --background: #0B0D0E;
  --surface: #151819;
  --raised: #202627;
  --text: #F3EFE5;
  --muted: #B6B9B3;
  --gold: #C7AE76;
  --gold-active: #E1C991;
  --border: #343C3C;
  --control: #74827D;
  --error: #F09B91;
  --success: #92B9A4;
  --background-rgb: 11, 13, 14;
  --surface-rgb: 21, 24, 25;
  --shadow-rgb: 0, 0, 0;
  --accent-soft: #263126;
  --gps-accent: #A2BA81;
  --gps-accent-text: #182015;
  --gps-choice-bg: #1D2424;
  --gps-choice-selected: #293424;
  --gps-choice-line: #93AA76;
  --gps-scene-top: #111817;
  --gps-scene-center: #101615;
  --gps-scene-bottom: #1C2920;
  --gps-sky: #C7AE760B;
  --gps-arrow: #BBCD98;
  --gps-arrow-shadow: #BBCD9830;
  --action-bg: #C7AE76;
  --action-hover: #E1C991;
  --action-text: #171A18;
  --warning-surface: #32291D;
  --warning-text: #E1C991;
}

/* The system preference also works when JavaScript is unavailable. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --background: #0B0D0E;
    --surface: #151819;
    --raised: #202627;
    --text: #F3EFE5;
    --muted: #B6B9B3;
    --gold: #C7AE76;
    --gold-active: #E1C991;
    --border: #343C3C;
    --control: #74827D;
    --error: #F09B91;
    --success: #92B9A4;
    --background-rgb: 11, 13, 14;
    --surface-rgb: 21, 24, 25;
    --shadow-rgb: 0, 0, 0;
    --accent-soft: #263126;
    --gps-accent: #A2BA81;
    --gps-accent-text: #182015;
    --gps-choice-bg: #1D2424;
    --gps-choice-selected: #293424;
    --gps-choice-line: #93AA76;
    --gps-scene-top: #111817;
    --gps-scene-center: #101615;
    --gps-scene-bottom: #1C2920;
    --gps-sky: #C7AE760B;
    --gps-arrow: #BBCD98;
    --gps-arrow-shadow: #BBCD9830;
    --action-bg: #C7AE76;
    --action-hover: #E1C991;
    --action-text: #171A18;
    --warning-surface: #32291D;
    --warning-text: #E1C991;
  }
}

body, .page-home { background: var(--background); color: var(--text); }
body { accent-color: var(--gps-accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input, textarea, select { caret-color: var(--gold); }
option { background: var(--surface); color: var(--text); }
.primary { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-text); }
.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.compare-controls button[aria-pressed="true"] { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-text); }
.closing { background: radial-gradient(ellipse at 50% 100%, var(--accent-soft), transparent 65%); }
.header { border-color: var(--border); background: var(--background); }
.page-home .header { background: rgba(var(--surface-rgb), .94); border-color: var(--border); color: var(--text); }
.page-home .header nav a, .page-home .language-switch a { color: var(--muted); }
.page-home .header nav a:hover, .page-home .header nav a[aria-current] { color: var(--gold-active); }
.page-home .header nav a:last-child, .page-home .header .menu-toggle { color: var(--text); border-color: var(--control); }
.page-home .header nav a { border-color: var(--border); }
.page-home .footer { background: var(--raised); color: var(--text); border-color: var(--border); }
.page-home .footer p, .page-home .footer-links a, .page-home .footer-bottom { color: var(--muted); }
.page-home .footer-links, .page-home .footer-bottom { border-color: var(--border); }
.page-home .footer .signature, .page-home .footer-links a:hover { color: var(--gold); }

/* Compact touch controls are shared by every header. */
.site-preferences { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.theme-controls { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 100px; background: var(--surface); }
.theme-controls:has(button[hidden]):not(:has(button:not([hidden]))) { display: none; }
.theme-controls button, .theme-current { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 100px; background: transparent; color: var(--muted); font: 500 11px/1 var(--sans); }
.theme-controls button:hover, .theme-current:hover { background: var(--raised); color: var(--text); }
.theme-controls button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
.theme-controls svg, .theme-current svg { width: 18px; height: 18px; flex-shrink: 0; }
.theme-current { border: 1px solid var(--border); }
.header .language-switch { margin: 0; padding: 2px; border-color: var(--border); background: var(--surface); align-self: center; }
.header .language-switch a, .header .language-switch button { min-width: 44px; min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.header .language-switch button { border: 0; border-radius: 100px; background: transparent; font: 500 11px/1 var(--sans); cursor: pointer; }
.header .language-switch button:hover { background: var(--raised); color: var(--text); }
.header .language-switch button[aria-pressed="true"] { background: var(--raised); color: var(--text); }
.header .language-switch a[aria-current] { background: var(--raised); color: var(--text) !important; border-color: var(--border); }
.theme-controls :focus-visible, .theme-current:focus-visible, .page-home :focus-visible { outline-color: var(--gold-active); }

/* Examples keep their own brand palette; their captions follow the page palette. */
.marque .card-art, .brand-result { background: var(--specimen-bg); color: var(--specimen-text); }
.brand-result p, .brand-result .eyebrow, .brand-preview-nav, .brand-preview-footer, .brand-preview-description { color: var(--specimen-muted); }
.brand-preview .sample-action { background: var(--specimen-text); color: var(--specimen-bg); }
.experience .card-art { background: var(--raised); }
.systemes .card-art { background: linear-gradient(135deg, var(--background), var(--raised)); }
.fiction-notice, .system-warning { color: var(--gold-active); }

/* The previous guide remains readable on its deep links and fallback. */
.wish-canvas, .guide-horizon, .journey-section, .guide-shell { background: var(--surface); color: var(--text); }
.canvas-top, .canvas-bottom, .guide-toolbar, .guide-foot { border-color: var(--border); }
.map-node, .horizon-node, .journey-choice { background: var(--surface); border-color: var(--control); color: var(--text); }
.map-node:hover, .horizon-node:hover { background: var(--raised); border-color: var(--gold); }
.map-node small, .horizon-node small, .horizon-live, .horizon-compass, .you-are-here, .journey-heading>.eyebrow, .journey-heading>p, .choice-number, .journey-choice small, .guide-progress, .guide-nav button, .guide-question>.eyebrow, .guide-question p, .guide-route-intro>.eyebrow, .guide-route-intro>p, .guide-panel-actions>span, .guide-back, .guide-selected small, .guide-next-move small, .phase-help, .journey-disclosure, .journey-reset { color: var(--muted); }
.canvas-intro .signature, .canvas-intro em, .horizon-intro .signature, .horizon-intro h2 em, .journey-heading h2 em, .guide-small-sign, .guide-route-symbol { color: var(--gold); }
.journey-choice:has(input:checked) { background: var(--gps-choice-selected); border-color: var(--gps-choice-line); }
.journey-choice:has(input:checked) .choice-number { background: var(--gps-accent); color: var(--gps-accent-text); }
.choice-number, .horizon-node .node-icon { background: var(--raised); }
.node-icon, .guide-route-symbol span, .guide-selected { border-color: var(--control); }
.journey-input select, .guide-departure-area select, .journey-input option, .guide-departure-area option { color: var(--text); background: var(--surface); border-color: var(--control); }
.guide-selected, .guide-next-move, .guide-route-symbol span:last-child { background: var(--raised); color: var(--text); }
.guide-panel-actions .button { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-text); }
.guide-panel-actions .button:hover { background: var(--action-hover); }
.journey-reset:hover, .guide-nav button[aria-current="step"] { color: var(--text); }
.guide-nav button>span { border-color: var(--control); }
.guide-nav button[aria-current="step"]>span, .guide-brand>span { background: var(--gps-accent); border-color: var(--gps-accent); color: var(--gps-accent-text); }
.guide-nav button[aria-current="step"] { border-bottom-color: var(--gold); }
.journey-load-error { color: var(--warning-text); }
.guide-shell :focus-visible, .guide-nav :focus-visible, .journey-input :focus-visible, .journey-choice:has(input:focus-visible) { outline-color: var(--gold-active); }
.wish-canvas :focus-visible { outline-color: var(--gold-active); }
.topographic-lines { stroke: var(--muted); }
.route-main, .route-branch { stroke: var(--gold); }
.map-point { fill: var(--surface); stroke: var(--gold); }
.horizon-next:hover { background: var(--raised); }

.page-home { --gps-ink: var(--text); --gps-muted: var(--muted); --gps-gold: var(--gold); --gps-line: var(--border); }
.gps-stage { background: var(--background); }
.gps-world { background: linear-gradient(180deg, var(--gps-scene-top), var(--gps-scene-center) 42%, var(--gps-scene-bottom)); }
.gps-sky { background: radial-gradient(ellipse at 76% 12%, var(--gps-sky), transparent 52%); }
.gps-scene-wash { background: linear-gradient(90deg, rgba(var(--background-rgb), 1) 0%, rgba(var(--background-rgb), .85) 22%, rgba(var(--background-rgb), .44) 36%, rgba(var(--background-rgb), 0) 54%); }
.gps-topline, .gps-eyebrow, .gps-intro-copy, .gps-scroll-cue, .gps-question-note { color: var(--muted); }
.gps-top-brand { color: var(--text); }
.gps-top-brand i { background: var(--gold); }
.gps-panel, .gps-journey[data-journey-ready="true"] .gps-panel { background: rgba(var(--surface-rgb), .97); border-color: var(--border); box-shadow: 0 18px 60px rgba(var(--shadow-rgb), .07), 0 2px 4px rgba(var(--shadow-rgb), .025); scrollbar-color: var(--control) transparent; }
.gps-intro, .gps-journey[data-journey-ready="true"] .gps-intro { background: transparent; border: none; box-shadow: none; }
.gps-panel h1, .gps-panel h2, .gps-library h2 { color: var(--text); }
.gps-intro h1 span, .gps-signature { color: var(--gold); }
.gps-primary { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-text); }
.gps-primary:hover { background: var(--action-hover); }
.gps-choice { color: var(--text); background: var(--gps-choice-bg); border-color: var(--border); }
.gps-choice:hover { background: var(--raised); border-color: var(--control); }
.gps-choice small, .gps-choice:has(input:checked) small { color: var(--muted); }
.gps-key { border-color: var(--border); color: var(--muted); }
.gps-check { color: var(--gps-accent); }
.gps-choice:has(input:checked) { background: var(--gps-choice-selected); border-color: var(--gps-choice-line); box-shadow: 0 0 0 1px var(--gps-choice-line); }
.gps-choice:has(input:checked) .gps-key { background: var(--gps-accent); border-color: var(--gps-accent); color: var(--gps-accent-text); }
.gps-choice:has(input:checked) .gps-check { color: var(--gps-accent); }
.gps-choice:has(input:focus-visible) { outline-color: var(--gold-active); }
.gps-back { border-color: var(--control); color: var(--muted); }
.gps-enter, .gps-local-note, .gps-own-words>summary { color: var(--muted); }
.gps-context-chip, .gps-recap>span { background: var(--accent-soft); color: var(--muted); }
.gps-own-words input { background: var(--surface); color: var(--text); border-color: var(--control); }
.gps-own-words form button { background: var(--raised); border-color: var(--control); color: var(--text); }
.gps-own-words [data-guide-suggestion] { color: var(--gps-accent); }
.gps-assistant, .gps-progress, .gps-world-sign { background: rgba(var(--surface-rgb), .97); border-color: var(--border); box-shadow: 0 5px 30px rgba(var(--shadow-rgb), .07); }
.gps-assistant-avatar { background: var(--ink); color: var(--specimen-bg); }
.gps-assistant-avatar>span { color: #C7AE76; }
.gps-assistant-name { color: var(--text); }
.gps-assistant-name small, .gps-assistant p { color: var(--muted); }
.gps-assistant>button { border-color: var(--control); color: var(--muted); }
.gps-assistant .gps-scene-next, .gps-assistant .gps-scene-contact { background: var(--action-bg); border-color: var(--action-bg); color: var(--action-text); }
.gps-assistant .gps-scene-next:disabled { background: var(--raised); border-color: var(--border); color: var(--muted); }
.gps-progress button { color: var(--muted); }
.gps-step-dot { background: var(--surface); border-color: var(--control); }
.gps-progress button[aria-current="step"] { color: var(--text); }
.gps-progress button[aria-current="step"] .gps-step-dot { background: var(--gps-accent); border-color: var(--gps-accent); color: var(--gps-accent-text); box-shadow: 0 0 0 4px var(--accent-soft); }
.gps-progress button[data-complete="true"] .gps-step-dot { background: var(--accent-soft); border-color: var(--gps-choice-line); color: var(--text); }
.gps-progress-track { background: var(--border); }
.gps-world-sign { color: var(--text); }
.gps-world-sign>span { background: var(--gps-accent); color: var(--gps-accent-text); }
.gps-world-sign:after { background: linear-gradient(var(--gps-accent), transparent); }
.gps-position, .gps-map-caption { color: var(--muted); }
.gps-position-arrow { background: var(--gps-arrow); filter: drop-shadow(0 6px 8px var(--gps-arrow-shadow)); }
.gps-compass { border-color: var(--control); }
.gps-arrival { color: var(--gps-accent); }
.gps-arrival>span { background: var(--accent-soft); }
.gps-result-summary, .gps-route-steps>li>span, .gps-route-steps details p, .gps-deliverables>summary, .gps-deliverables ul, .gps-text-button { color: var(--muted); }
.gps-route-steps>li, .gps-deliverables { border-color: var(--border); }
.gps-route-steps summary, .gps-route-steps h3 { color: var(--text); }
.gps-route-steps summary b, .gps-result-actions [role="status"] { color: var(--gps-accent); }
.guide-copy-fallback { color: var(--text) !important; background: var(--surface) !important; border-color: var(--control) !important; }
.journey-load-error { background: var(--warning-surface); color: var(--warning-text); }
.gps-fallback-note { color: var(--muted); }
.gps-library { background: var(--surface); border-color: var(--border); color: var(--text); }
.gps-library-heading>p, .gps-library-links small, .gps-library-links p, .gps-studio-note { color: var(--muted); }
.gps-library-links>a, .gps-library-links>a:first-child { border-color: var(--border); }
.gps-library-links>a>span:last-child, .gps-library-icon { color: var(--gps-accent); }
.gps-library-icon { border-color: var(--border); }
.gps-studio-note>span { color: var(--gold); }
.gps-world[data-renderer="fallback"]:before { border-color: var(--surface); box-shadow: inset 0 0 0 5px var(--gold), 0 0 0 1px var(--border); }

@media (max-width: 767px) {
  .page-home .header nav { background: var(--surface); }
  .gps-scene-wash { background: linear-gradient(180deg, rgba(var(--background-rgb), .96) 0%, rgba(var(--background-rgb), .85) 46%, rgba(var(--background-rgb), .4) 70%, rgba(var(--background-rgb), 0) 100%); }
}

@media (forced-colors: active) {
  .gps-choice:has(input:checked), .theme-controls button[aria-pressed="true"] { outline: 2px solid Highlight; }
  .gps-position-arrow { background: Highlight; }
}