/* Shared appearance tokens. Light retains the original paper and green ink. */
:root {
  color-scheme: light;
  --scheme: light;
  --paper: #f7f6f0;
  --panel: #fdfcf8;
  --ink: #263f35;
  --muted: #626f64;
  --line: #dde2d8;
  --soft: #edf0e7;
  --red: #aa4f3b;
  --accent-text: #5f714d;
  --accent-line: #8a9b80;
  --border-hover: #a8b6a2;
  --focus: #71866a;
  --placeholder: #657267;
  --action-bg: #263f35;
  --action-text: #fdfcf8;
  --action-hover: #375647;
  --error-bg: #f8eee7;
  --error-line: #d8b6a3;
  --seal-line: #bf7760;
  --seal-bg: #b95a4409;
  --selection: #dce5d4;
  --scroll-thumb: #a3b09a;
  --backdrop: #14251e66;
  --dialog-shadow: #14251e20;
  --panel-shadow: #4a584405;
  --paper-wash: #efeddf38;
  --paper-grain: #7b7e5a03;
  --art-ink: #8d9b84;
  --mountain-far: #728475;
  --mountain-fade: #a5b09a;
  --mountain-near: #526a59;
  --mountain-middle: #6d806a;
  --mountain-detail: #5f7460;
  --mountain-water: #899981;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --scheme: dark;
  --paper: #161c19;
  --panel: #1d2621;
  --ink: #e4e8da;
  --muted: #a5b1a2;
  --line: #405047;
  --soft: #28342d;
  --red: #e49c82;
  --accent-text: #b5c69f;
  --accent-line: #879b7d;
  --border-hover: #73876e;
  --focus: #b3c8a6;
  --placeholder: #9ba794;
  --action-bg: #b8c8ac;
  --action-text: #172219;
  --action-hover: #cbd8c1;
  --error-bg: #3a2c25;
  --error-line: #805d50;
  --seal-line: #a17461;
  --seal-bg: #e49c820d;
  --selection: #425a49;
  --scroll-thumb: #687e68;
  --backdrop: #080e0bb3;
  --dialog-shadow: #00000059;
  --panel-shadow: #00000018;
  --paper-wash: #8fa48a08;
  --paper-grain: #b0bc9b03;
  --art-ink: #a5b99e;
  --mountain-far: #9db09c;
  --mountain-fade: #667a65;
  --mountain-near: #a9c09f;
  --mountain-middle: #91a78a;
  --mountain-detail: #bbccad;
  --mountain-water: #a7b69a;
}

/* The system default also works before scripts load or when scripts are disabled. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --scheme: dark;
    --paper: #161c19;
    --panel: #1d2621;
    --ink: #e4e8da;
    --muted: #a5b1a2;
    --line: #405047;
    --soft: #28342d;
    --red: #e49c82;
    --accent-text: #b5c69f;
    --accent-line: #879b7d;
    --border-hover: #73876e;
    --focus: #b3c8a6;
    --placeholder: #9ba794;
    --action-bg: #b8c8ac;
    --action-text: #172219;
    --action-hover: #cbd8c1;
    --error-bg: #3a2c25;
    --error-line: #805d50;
    --seal-line: #a17461;
    --seal-bg: #e49c820d;
    --selection: #425a49;
    --scroll-thumb: #687e68;
    --backdrop: #080e0bb3;
    --dialog-shadow: #00000059;
    --panel-shadow: #00000018;
    --paper-wash: #8fa48a08;
    --paper-grain: #b0bc9b03;
    --art-ink: #a5b99e;
    --mountain-far: #9db09c;
    --mountain-fade: #667a65;
    --mountain-near: #a9c09f;
    --mountain-middle: #91a78a;
    --mountain-detail: #bbccad;
    --mountain-water: #a7b69a;
  }
}

html { background: var(--paper); scrollbar-color: var(--scroll-thumb) var(--paper); }
::selection { background: var(--selection); color: var(--ink); }
input, textarea, select { color-scheme: var(--scheme); accent-color: var(--red); }
input[type="datetime-local"] { color-scheme: var(--scheme); }
select option { color: var(--ink); background: var(--panel); }
input::placeholder, textarea::placeholder, .home-question::placeholder { color: var(--placeholder); opacity: 1; }
input:focus, select:focus, textarea:focus { outline-color: var(--focus); }

/* Small, ordinary controls beside the existing history button. */
.header-controls { display: flex; align-items: center; gap: 12px; min-width: 0; }
.theme-control { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 12px; }
#theme-select { width: auto; min-width: 0; max-width: 144px; min-height: 40px; padding: 7px 10px; font-size: 12px; }

/* Filled actions need their own pair; ink is also used by text and hexagram lines. */
.cast-button, .home-start, .traditional-button-primary {
  border-color: var(--action-bg);
  background: var(--action-bg);
  color: var(--action-text);
}
.cast-button:hover, .home-start:hover, .traditional-button-primary:hover {
  border-color: var(--action-hover);
  background: var(--action-hover);
}
.chart-toggle.is-active, .chart-reading-mode-button.is-active, .chart-reading-size-button.is-active,
.count-badge, .toast { background: var(--action-bg); color: var(--action-text); }
.sidebar-toggle:hover, .history-button:hover, .save-button:hover, .icon-button:hover,
.result-inspect:hover, .traditional-button:hover, .home-inspiration-example:hover,
.home-tool-card:hover { border-color: var(--border-hover); }
.home-tool-card:hover { background: var(--soft); }
.traditional-button-primary:hover { border-color: var(--action-hover); }

h1 > span, .home-title > span, .chart-keyword, .chart-supplemental-source,
.chart-change-inspect, .chart-reference-full { color: var(--accent-text); }
.yao-label, .six-lines-figure-label, .card-plus, .home-ink-inscription,
.home-art-caption, .home-method-tag > span, .home-tool-index, .home-tool-icon,
.home-tool-badge, .home-tool-action > span, .home-bottom-note { color: var(--muted); }
.question-display, .chart-reading-ancient { border-left-color: var(--accent-line); }
.six-lines-coin { border-color: var(--line); }
.chart-reference-marker { border-color: var(--error-line); }
.form-error, .chart-moving-button.is-active, .liu-ren-palace-current {
  border-color: var(--error-line);
  background: var(--error-bg);
}
.chart-matrix-scroller { scrollbar-color: var(--scroll-thumb) var(--paper); }
dialog { box-shadow: 0 20px 60px var(--dialog-shadow); }
dialog::backdrop, .sidebar-backdrop { background: var(--backdrop); }

/* The selected navigation and its drawn icon share the same ink and paper palette. */
.nav-link.nav-active {
  border-color: var(--line);
  background: linear-gradient(110deg, var(--soft), var(--panel));
}
.nav-icon {
  border-color: var(--line);
  background: linear-gradient(145deg, var(--panel), var(--soft));
  color: var(--muted);
}
.nav-link:hover .nav-icon { border-color: var(--border-hover); color: var(--ink); }
.nav-link.nav-active .nav-icon {
  border-color: var(--accent-line);
  background: var(--selection);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--soft);
}

/* Paper textures stay subtle; artwork and uploaded reference images keep their own colors. */
.home-question-panel {
  border-color: var(--line);
  background: radial-gradient(ellipse at 50% 0, var(--paper-wash), transparent 66%), var(--panel);
}
.home-question-panel::before, .home-question-panel::after { border-color: var(--seal-line); }
.home-question-ornament > span { background: var(--accent-line); }
.home-question { border-color: var(--line); background: var(--paper); }
.home-question:focus { border-color: var(--focus); outline-color: var(--focus); }
.home-optional, .home-question-meta > span, .home-inspiration-heading,
.home-inspiration-step, .home-inspiration-fill, .home-inspiration-help,
.home-methods > legend, .home-method-icon, .home-method-subtitle,
.home-method-note, .home-result-note, .home-tool-action .home-icon { color: var(--muted); }
.home-inspiration-example, .home-method-card { border-color: var(--line); background: var(--paper); }
.home-inspiration-example:hover, .home-method-card:hover {
  border-color: var(--border-hover);
  background: var(--soft);
}
.home-inspiration-category { border-right-color: var(--line); background: transparent; color: var(--accent-text); }
.home-method-card::after { background: var(--red); }
.home-method-check { background: var(--action-bg); color: var(--action-text); }
.home-method-option > input:checked + .home-method-card { border-color: var(--accent-line); background: var(--soft); }
.home-method-option > input:checked + .home-method-card .home-method-icon { color: var(--accent-text); }
.home-settings-link { color: var(--accent-text); }
.home-tool-icon { border-color: var(--line); background: var(--soft); }
.home-icon [fill="#b95a44"] { fill: var(--red); }
.home-art-seal, .home-question-seal {
  border-color: var(--seal-line);
  background: var(--seal-bg);
  color: var(--red);
}
.home-art-seal { box-shadow: inset 0 0 0 1px var(--paper); }
.home-tool-soon .home-tool-badge { border-color: var(--error-line); color: var(--red); }
.art-yao { background: var(--art-ink); }
.art-yao.y2 { background: linear-gradient(to right, var(--art-ink) 43%, transparent 43%, transparent 57%, var(--art-ink) 57%); }
#home-ink-far stop:first-child { stop-color: var(--mountain-far); }
#home-ink-far stop:last-child { stop-color: var(--mountain-fade); }
#home-ink-near stop:first-child { stop-color: var(--mountain-near); }
#home-ink-near stop:nth-child(2) { stop-color: var(--mountain-middle); }
#home-ink-near stop:last-child { stop-color: var(--mountain-fade); }
#home-ink-cloud stop { stop-color: var(--paper); }
.home-ink-mountains path[stroke] { stroke: var(--mountain-detail); }
.home-ink-water, .home-ink-scene > g[stroke] { stroke: var(--mountain-water); }
.home-ink-scene > g[fill] { fill: var(--mountain-far); }
.home-ink-scene > circle { fill: var(--red); }

@media (max-width: 899px) {
  .site-sidebar { box-shadow: 12px 0 36px var(--dialog-shadow); }
  .header-controls { gap: 8px; }
  .theme-control > span { display: none; }
}
@media (max-width: 600px) {
  .site-header, .header-brand-group, .header-controls { gap: 8px; }
  #theme-select { max-width: 110px; padding-inline: 6px; }
}
@media (max-width: 380px) {
  .header-controls { gap: 6px; }
  #theme-select { max-width: 96px; }
}