/* Shared colour roles keep every page readable in all palettes. */
:root {
    --demo-bg: #1b1f18;
    --demo-ink: #c4cbb6;
    --accent-hover: #e5f4a0;
    --accent-hover-ink: #101706;
    --outline: #69705e;
    --poster-placeholder: #3c4735;
    --round-outline: #677057;
    --meta-dot: #777f6d;
    --section-bg: #20231e;
    --step-line: #505846;
    --chip-line: #535c47;
    --breadcrumb-separator: #67705c;
    --label-ink: #d9dccf;
    --input-line: #535b4a;
    --input-bg: #1b1e19;
    --placeholder: #929b84;
    --input-hover: #83906e;
    --rating-line: #5c6650;
    --body-copy: #d0d3c6;
    --orbit-line: #59674a;
    --notice-line: #717c4f;
    --notice-bg: #2d3521;
    --notice-ink: #e1e9cb;
    --success-notice-line: #596d3c;
    --success-notice-bg: #27331e;
    --error-ink: #ffd2c8;
    --error-line: #80584d;
    --error-bg: #38251f;
    --demo-notice-line: #797043;
    --demo-notice-bg: #353322;
    --demo-notice-ink: #efe6b8;
    --count-line: #596744;
    --paid-bg: #26331e;
    --paid-ink: #d6eab6;
    --paid-line: #4d6437;
    --pending-bg: #393321;
    --pending-ink: #ebd89b;
    --pending-line: #7b6b35;
    --failed-bg: #3f2822;
    --failed-ink: #f7c6b9;
    --failed-line: #815446;
    --cancelled-bg: #2c302a;
    --cancelled-ink: #c1c6b8;
    --cancelled-line: #535d49;
    --table-head: #23271f;
    --table-hover: #1c2019;
    --footer-bg: #131512;
    --footer-line: #2c3227;
    --footer-ink: #a3ad95;
    --theme-shadow: 0 16px 38px #0005;
}

:root[data-theme="light"] {
    --bg: #f5f6f2;
    --surface: #ffffff;
    --surface-high: #e7ebdf;
    --ink: #252d23;
    --muted: #5b6555;
    --line: #cbd3c2;
    --accent: #386135;
    --accent-dark: #ffffff;
    --amber: #84540e;
    --danger: #a43727;
    --demo-bg: #e9eddf;
    --demo-ink: #4b5c3f;
    --accent-hover: #294d27;
    --accent-hover-ink: #ffffff;
    --outline: #7d8971;
    --poster-placeholder: #e7ebdf;
    --round-outline: #7d8971;
    --meta-dot: #69745f;
    --section-bg: #e9eddf;
    --step-line: #a7b59a;
    --chip-line: #9fac92;
    --breadcrumb-separator: #69745f;
    --label-ink: #35422e;
    --input-line: #89977b;
    --input-bg: #ffffff;
    --placeholder: #68765c;
    --input-hover: #4d6c3b;
    --rating-line: #9fac92;
    --body-copy: #45513c;
    --orbit-line: #a4b493;
    --notice-line: #98af77;
    --notice-bg: #eef3e4;
    --notice-ink: #3b5326;
    --success-notice-line: #8fab70;
    --success-notice-bg: #e9f2df;
    --error-ink: #8e3221;
    --error-line: #c08877;
    --error-bg: #faebe6;
    --demo-notice-line: #bba260;
    --demo-notice-bg: #fbf3d7;
    --demo-notice-ink: #6d5114;
    --count-line: #9dad8c;
    --paid-bg: #e8f1de;
    --paid-ink: #3e5f27;
    --paid-line: #92ad73;
    --pending-bg: #fbf2d8;
    --pending-ink: #795609;
    --pending-line: #bda060;
    --failed-bg: #fae9e3;
    --failed-ink: #933825;
    --failed-line: #c28b79;
    --cancelled-bg: #ebeee6;
    --cancelled-ink: #59664e;
    --cancelled-line: #a8b19e;
    --table-head: #edf0e7;
    --table-hover: #f0f3e9;
    --footer-bg: #e9eddf;
    --footer-line: #c4ceba;
    --footer-ink: #5b6a4f;
    color-scheme: light;
    --theme-shadow: 0 16px 38px #26311b26;
}

:root[data-theme="sepia"] {
    --bg: #f4ede2;
    --surface: #fff8ef;
    --surface-high: #e8dac8;
    --ink: #342b23;
    --muted: #705d4a;
    --line: #d6c3aa;
    --accent: #874c2b;
    --accent-dark: #fff9ef;
    --amber: #835211;
    --danger: #a03629;
    --demo-bg: #eaddc8;
    --demo-ink: #6b533b;
    --accent-hover: #69391e;
    --accent-hover-ink: #fff9ef;
    --outline: #a48868;
    --poster-placeholder: #e8dac8;
    --round-outline: #a48868;
    --meta-dot: #897259;
    --section-bg: #ede1cd;
    --step-line: #b8a082;
    --chip-line: #b7a082;
    --breadcrumb-separator: #897259;
    --label-ink: #59432d;
    --input-line: #aa9070;
    --input-bg: #fffbf4;
    --placeholder: #7b664e;
    --input-hover: #8a603b;
    --rating-line: #b7a082;
    --body-copy: #594837;
    --orbit-line: #bea585;
    --notice-line: #abaf7a;
    --notice-bg: #f0eedc;
    --notice-ink: #545a2c;
    --success-notice-line: #9fa772;
    --success-notice-bg: #ecebd7;
    --error-ink: #8f3424;
    --error-line: #c28c75;
    --error-bg: #f5e3d7;
    --demo-notice-line: #ba9a5b;
    --demo-notice-bg: #f7ebcc;
    --demo-notice-ink: #725116;
    --count-line: #b19670;
    --paid-bg: #e9ead3;
    --paid-ink: #4e5f2b;
    --paid-line: #a0ab79;
    --pending-bg: #f7e8c5;
    --pending-ink: #755013;
    --pending-line: #bda060;
    --failed-bg: #f5e0d4;
    --failed-ink: #943b28;
    --failed-line: #c28a72;
    --cancelled-bg: #e9e1d3;
    --cancelled-ink: #6d5c45;
    --cancelled-line: #b9a88d;
    --table-head: #ede2d1;
    --table-hover: #f1e6d5;
    --footer-bg: #eaddc8;
    --footer-line: #ceba9b;
    --footer-ink: #725c40;
    color-scheme: light;
    --theme-shadow: 0 16px 38px #503c2826;
}

/* Badges over artwork stay legible regardless of the surrounding theme. */
.hero-age, .poster-age { color: #f0eee5; }
.theme-picker { position: relative; flex-shrink: 0; }
.theme-picker[hidden] { display: none; }
.theme-trigger { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 42px; min-height: 40px; padding: 8px 11px; border: 1px solid var(--outline); border-radius: 3px; color: var(--ink); font-size: 12px; cursor: pointer; list-style: none; }
.theme-trigger::-webkit-details-marker { display: none; }
.theme-trigger::marker { content: ''; }
.theme-trigger:hover, .theme-picker[open] > .theme-trigger { background: var(--surface-high); }
.theme-trigger:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.theme-trigger svg { flex-shrink: 0; }
.theme-menu { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 244px; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--theme-shadow); }
.theme-menu-title { padding: 5px 9px 10px; color: var(--muted); font-size: 11px; font-weight: 500; }
.theme-option { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 58px; padding: 9px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--ink); text-align: left; }
.theme-option:hover { background: var(--surface-high); }
.theme-option[aria-pressed="true"] { border-color: var(--accent); background: var(--surface-high); }
.theme-option strong { display: block; font-size: 13px; font-weight: 600; }
.theme-option small { display: block; margin-top: 3px; font-size: 10px; font-weight: 400; color: var(--muted); }
.theme-check { margin-left: auto; color: var(--accent); opacity: 0; }
.theme-option[aria-pressed="true"] .theme-check { opacity: 1; }
.theme-swatch { width: 29px; height: 29px; border: 1px solid var(--outline); border-radius: 50%; flex-shrink: 0; }
.theme-swatch-dark { background: linear-gradient(135deg, #161816 50%, #d8ed76 50%); }
.theme-swatch-light { background: linear-gradient(135deg, #f5f6f2 50%, #386135 50%); }
.theme-swatch-sepia { background: linear-gradient(135deg, #f4ede2 50%, #874c2b 50%); }
@media (max-width: 1100px) {
    .theme-trigger-label { display: none; }
    .theme-trigger { min-width: 38px; padding-inline: 9px; }
}
@media (max-width: 600px) {
    .theme-trigger { min-width: 34px; min-height: 35px; padding: 7px; }
    .theme-menu { position: fixed; top: 70px; right: 18px; width: min(244px, calc(100vw - 36px)); }
    .header-inner { column-gap: 10px; }
}
