/* Default Old World theme. Load after Bootstrap and before DOM/page stylesheets.
   Species themes can override --site-* tokens later, independently of data-bs-theme.
   Layout, sizing and feature-specific selectors belong in their own stylesheets. */

:root,
[data-bs-theme="light"] {
    color-scheme: light;
    --site-font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
    --site-font-heading: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --site-bg: #f1e6d0;
    --site-bg-rgb: 241, 230, 208;
    --site-surface: #faf4e8;
    --site-surface-rgb: 250, 244, 232;
    --site-surface-raised: #fffaf1;
    --site-surface-muted: #e7dac0;
    --site-surface-muted-rgb: 231, 218, 192;
    --site-text: #302b23;
    --site-text-rgb: 48, 43, 35;
    --site-text-muted: #6b5e4d;
    --site-heading: #42321e;
    --site-heading-rgb: 66, 50, 30;
    --site-border: #99866a;
    --site-accent: #842e2c;
    --site-accent-rgb: 132, 46, 44;
    --site-accent-hover: #64201f;
    --site-accent-active: #4b1818;
    --site-accent-contrast: #fffaf1;
    --site-link: #842e2c;
    --site-link-rgb: 132, 46, 44;
    --site-link-hover: #64201f;
    --site-link-hover-rgb: 100, 32, 31;
    --site-focus-rgb: 132, 46, 44;
    --site-wash: rgba(132, 46, 44, 0.045);
    --site-shadow: 0 0.4rem 1.25rem rgba(48, 43, 35, 0.09);
    --site-selection: #cba45f;
    --site-selection-text: #211b15;
    --site-brass: #9b773e;
    --site-logo-paper: #f5ead5;
    --site-logo-edge: #e7d8bc;
    --site-header-height: 6.5rem;
}

[data-bs-theme="dark"] {
    color-scheme: dark;
    --site-bg: #1d1a17;
    --site-bg-rgb: 29, 26, 23;
    --site-surface: #27221d;
    --site-surface-rgb: 39, 34, 29;
    --site-surface-raised: #302921;
    --site-surface-muted: #373027;
    --site-surface-muted-rgb: 55, 48, 39;
    --site-text: #e5dccb;
    --site-text-rgb: 229, 220, 203;
    --site-text-muted: #b8ab97;
    --site-heading: #f0dfbc;
    --site-heading-rgb: 240, 223, 188;
    --site-border: #82715b;
    --site-accent: #cc8d82;
    --site-accent-rgb: 204, 141, 130;
    --site-accent-hover: #e3a79a;
    --site-accent-active: #f0c1b5;
    --site-accent-contrast: #211b15;
    --site-link: #e3a79a;
    --site-link-rgb: 227, 167, 154;
    --site-link-hover: #f0c1b5;
    --site-link-hover-rgb: 240, 193, 181;
    --site-focus-rgb: 204, 141, 130;
    --site-wash: rgba(204, 141, 130, 0.025);
    --site-shadow: 0 0.4rem 1.25rem rgba(0, 0, 0, 0.22);
}

/* Bridge the palette to Bootstrap. Status colours retain Bootstrap's meaning. */
:root,
[data-bs-theme] {
    --bs-body-font-family: var(--site-font-body);
    --bs-body-bg: var(--site-bg);
    --bs-body-bg-rgb: var(--site-bg-rgb);
    --bs-body-color: var(--site-text);
    --bs-body-color-rgb: var(--site-text-rgb);
    --bs-emphasis-color: var(--site-heading);
    --bs-emphasis-color-rgb: var(--site-heading-rgb);
    --bs-secondary-color: var(--site-text-muted);
    --bs-secondary-bg: var(--site-surface-muted);
    --bs-secondary-bg-rgb: var(--site-surface-muted-rgb);
    --bs-tertiary-color: var(--site-text-muted);
    --bs-tertiary-bg: var(--site-surface);
    --bs-tertiary-bg-rgb: var(--site-surface-rgb);
    --bs-border-color: var(--site-border);
    --bs-border-color-translucent: var(--site-border);
    --bs-primary: var(--site-accent);
    --bs-primary-rgb: var(--site-accent-rgb);
    --bs-primary-text-emphasis: var(--site-heading);
    --bs-primary-bg-subtle: var(--site-surface-muted);
    --bs-primary-border-subtle: var(--site-border);
    --bs-link-color: var(--site-link);
    --bs-link-color-rgb: var(--site-link-rgb);
    --bs-link-hover-color: var(--site-link-hover);
    --bs-link-hover-color-rgb: var(--site-link-hover-rgb);
    --bs-focus-ring-color: rgba(var(--site-focus-rgb), 0.4);
    --bs-heading-color: var(--site-heading);
    --bs-border-radius: 0.3rem;
    --bs-border-radius-lg: 0.45rem;
}

body {
    background-image: radial-gradient(ellipse at top left, var(--site-wash), transparent 65%);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.modal-title,
.card-header {
    font-family: var(--site-font-heading);
}

::selection {
    color: var(--site-selection-text);
    background-color: var(--site-selection);
}

/* Shared component appearance only; component layouts live elsewhere. */
.card {
    --bs-card-bg: var(--site-surface);
    --bs-card-cap-bg: var(--site-surface-muted);
    --bs-card-border-color: var(--site-border);
}

.modal {
    --bs-modal-bg: var(--site-surface-raised);
    --bs-modal-border-color: var(--site-border);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--site-surface-raised);
    --bs-dropdown-link-color: var(--site-text);
    --bs-dropdown-link-hover-color: var(--site-text);
    --bs-dropdown-link-hover-bg: var(--site-surface-muted);
    --bs-dropdown-link-active-color: var(--site-accent-contrast);
    --bs-dropdown-link-active-bg: var(--site-accent);
    --bs-dropdown-border-color: var(--site-border);
    --bs-dropdown-box-shadow: var(--site-shadow);
}

.form-control,
.form-select {
    background-color: var(--site-surface-raised);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--site-accent);
    box-shadow: 0 0 0 0.25rem rgba(var(--site-focus-rgb), 0.25);
}

.form-check-input:checked {
    background-color: var(--site-accent);
    border-color: var(--site-accent);
}

.btn-primary {
    --bs-btn-color: var(--site-accent-contrast);
    --bs-btn-bg: var(--site-accent);
    --bs-btn-border-color: var(--site-accent);
    --bs-btn-hover-color: var(--site-accent-contrast);
    --bs-btn-hover-bg: var(--site-accent-hover);
    --bs-btn-hover-border-color: var(--site-accent-hover);
    --bs-btn-active-color: var(--site-accent-contrast);
    --bs-btn-active-bg: var(--site-accent-active);
    --bs-btn-active-border-color: var(--site-accent-active);
    --bs-btn-disabled-color: var(--site-accent-contrast);
    --bs-btn-disabled-bg: var(--site-accent);
    --bs-btn-disabled-border-color: var(--site-accent);
    --bs-btn-focus-shadow-rgb: var(--site-focus-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--site-link);
    --bs-btn-border-color: var(--site-accent);
    --bs-btn-hover-color: var(--site-accent-contrast);
    --bs-btn-hover-bg: var(--site-accent);
    --bs-btn-hover-border-color: var(--site-accent);
    --bs-btn-active-color: var(--site-accent-contrast);
    --bs-btn-active-bg: var(--site-accent-active);
    --bs-btn-active-border-color: var(--site-accent-active);
    --bs-btn-disabled-color: var(--site-text-muted);
    --bs-btn-disabled-border-color: var(--site-border);
    --bs-btn-focus-shadow-rgb: var(--site-focus-rgb);
}

/* Bootstrap hard-codes white here; the dark-mode accent needs dark text. */
.text-bg-primary {
    color: var(--site-accent-contrast) !important;
}

/* Shared inline SVG baseline, independent of the surrounding component. */
svg.bi {
    vertical-align: -0.125em;
}