/* Adapted from Season Simulator web.py at cc3c86d; no runtime dependency.
   Original palette tokens retained. Reference extensions strengthen contrast
   for small text, meaningful control boundaries and keyboard focus. */
:root {
  color-scheme: light;
  --page-bg: #f6f5f0;
  --text: #1f2933;
  --header-bg: #243447;
  --header-text: #ffffff;
  --heading: #52616f;
  --label: #25313d;
  --field-bg: #ffffff;
  --field-text: #1f2933;
  --field-border: #b7c0c7;
  --button-bg: #0f766e;
  --button-text: #ffffff;
  --button-disabled-bg: #7b8a8b;
  --panel-bg: #ffffff;
  --panel-border: #d4d9dd;
  --muted: #5b6b7b;
  --error-bg: #fff3f1;
  --error-border: #b42318;
  --error-text: #7a271a;
  --table-header-bg: #eef1f4;
  --table-row-border: #e4e7ea;
  --table-row-hover: #f8fafb;
  --control-border: #73818e;
  --selected: #e3efed;
  --header-selected: #324a60;
  --focus: #0f766e;
  --warning: #805000;
  --success: #22683b;
  --shadow: 0 12px 30px rgb(20 25 30 / 10%);
  /* Fixed backing for original parchment artwork; never recolor the images. */
  --art-paper: #f4ead4;
  --art-text: #30261a;
  --art-border: #a6946a;
}
/* Auto also works without JS. An explicit light preference overrides this query. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page-bg: #12161a;
    --text: #e6edf3;
    --header-bg: #1b2836;
    --header-text: #f8fafc;
    --heading: #a8b3bf;
    --label: #d6dee6;
    --field-bg: #1a222b;
    --field-text: #f1f5f9;
    --field-border: #435261;
    --button-bg: #2aa198;
    --button-text: #071312;
    --button-disabled-bg: #53636b;
    --panel-bg: #171e25;
    --panel-border: #34424f;
    --muted: #9aa8b5;
    --error-bg: #3a1717;
    --error-border: #ff8a80;
    --error-text: #ffd6d1;
    --table-header-bg: #202a34;
    --table-row-border: #2d3945;
    --table-row-hover: #1d2730;
    --control-border: #8294a5;
    --selected: #203c3a;
    --header-selected: #273e51;
    --focus: #5dd1c6;
    --warning: #f0c77e;
    --success: #9dd9b0;
    --shadow: 0 12px 30px rgb(0 0 0 / 24%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #12161a;
  --text: #e6edf3;
  --header-bg: #1b2836;
  --header-text: #f8fafc;
  --heading: #a8b3bf;
  --label: #d6dee6;
  --field-bg: #1a222b;
  --field-text: #f1f5f9;
  --field-border: #435261;
  --button-bg: #2aa198;
  --button-text: #071312;
  --button-disabled-bg: #53636b;
  --panel-bg: #171e25;
  --panel-border: #34424f;
  --muted: #9aa8b5;
  --error-bg: #3a1717;
  --error-border: #ff8a80;
  --error-text: #ffd6d1;
  --table-header-bg: #202a34;
  --table-row-border: #2d3945;
  --table-row-hover: #1d2730;
  --control-border: #8294a5;
  --selected: #203c3a;
  --header-selected: #273e51;
  --focus: #5dd1c6;
  --warning: #f0c77e;
  --success: #9dd9b0;
  --shadow: 0 12px 30px rgb(0 0 0 / 24%);
}
:root[data-theme="light"] { color-scheme: light; }
:root {
  /* Compatibility aliases keep each Reference browser's layout independent. */
  --bg: var(--page-bg);
  --surface: var(--panel-bg);
  --surface-soft: var(--table-header-bg);
  --surface-elevated: var(--field-bg);
  --border: var(--panel-border);
  --secondary: var(--label);
  --accent: var(--button-bg);
  --accent-strong: var(--button-bg);
  --link: var(--button-bg);
  --accent-fill: var(--button-bg);
  --on-accent: var(--button-text);
  --hover: var(--table-row-hover);
  --disabled-bg: var(--table-header-bg);
  --disabled-text: var(--muted);
  --danger: var(--error-border);
}
a { color: var(--link); text-underline-offset: 3px; }
button, input, select, textarea { accent-color: var(--accent); }
input, select, textarea { border-color: var(--control-border); background: var(--field-bg); color: var(--field-text); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
button:disabled, input:disabled, select:disabled, textarea:disabled {
  background: var(--disabled-bg); color: var(--disabled-text); opacity: 1; cursor: not-allowed;
}
.core-subgroup-filters.is-inactive { opacity: 1; }
.core-subgroup-filters.is-inactive .check-filter { border-style: dashed; color: var(--disabled-text); background: var(--disabled-bg); }
.core-subgroup-filters.is-inactive .check-filter span { color: var(--disabled-text); }
:root body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px;
}
.building-card:hover, .family-card:hover, .tree-link:hover, .progression-button:hover,
.gallery-button:hover, #reference-nav a:hover { background: var(--hover); }
.building-card.is-active, .family-card.is-active, .tree-link[aria-current="page"],
#reference-nav a[aria-current="page"] {
  background: var(--selected); box-shadow: inset 0 0 0 2px var(--accent);
}
#reference-nav a[aria-current="page"] { color: var(--text); text-decoration: underline; }
.primary-link { background: var(--accent-fill); color: var(--on-accent); }
.primary-link:hover { text-decoration: underline; }
.gallery-button, .progression-button, .check-filter { border-color: var(--control-border); }
.audit-ref:hover::after, .audit-ref:focus::after, .audit-ref.is-open::after {
  background: var(--surface-elevated); color: var(--text); border: 1px solid var(--control-border);
  box-shadow: var(--shadow); white-space: normal; overflow-wrap: anywhere; width: max-content;
}

th { background: var(--table-header-bg); color: var(--heading); }
th, td { border-bottom-color: var(--table-row-border); }
tbody tr:hover { background: var(--table-row-hover); }
.site-header { background: var(--header-bg); color: var(--header-text); }
.site-header a { color: var(--header-text); }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--header-selected); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -3px var(--header-text); }
:root body .site-header :is(a, select):focus-visible { outline-color: var(--header-text); }
.theme-control { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.theme-control label { display: flex; align-items: center; gap: 8px; color: var(--header-text); font-size: 13px; }
.theme-control select { width: auto; min-width: 150px; min-height: 44px; padding: 8px 9px; border: 1px solid var(--control-border); border-radius: 4px; font: inherit; background: var(--field-bg); color: var(--field-text); }
@media (forced-colors: active) {
  .building-card.is-active, .family-card.is-active, .tree-link[aria-current="page"] { border: 2px solid Highlight; }
}