/* =============================================
NOCTS — colour schemes + the header's language/theme switches.
Loaded LAST on every page, so these tokens win over the ones nocts_main.css and
nocts_legal.css declare. Classic black/gold (dark, default) and ivory/bronze (light),
matching the app's gold scheme (src/styles/accent-gold.css).
`` and `` are set before first paint by the inline
script in each page's ; scripts/nocts_prefs.js wires the buttons.
============================================= */
:root,
:root[data-theme="dark"] {
color-scheme: dark;
/* rgb triplets for tinted shadows/fills: rgba(var(--primary-rgb), .2) */
--primary-rgb: 199,154,91;
--gold-rgb: 199,154,91;
--ink-rgb: 255,255,255; /* hairline fills on surfaces */
--hero-glow: rgba(160,115,50,.20);
--bg-base: #0b0b0c;
--bg-surface: #141416;
--bg-elevated: #1c1c1f;
--bg-overlay: rgba(6,6,8,.72);
--bg-nav: rgba(11,11,12,.86);
--primary: #c79a5b;
--primary-hover: #d4a96b;
--primary-active: #b3874a;
--primary-alpha: rgba(199,154,91,.12);
--primary-soft: rgba(199,154,91,.12);
--text-primary: #f3efe7;
--text-secondary: #a8a196;
--text-muted: #6e685f;
--text-on-primary: #0b0b0c;
--border-subtle: #1d1c1a;
--border-default: #2a2824;
--border-strong: #c79a5b;
--gold: #c79a5b;
--shimmer-start: #8a6420;
--shimmer-mid: #f1dcb4;
--shimmer-end: #c79a5b;
--info: #c79a5b;
}
:root[data-theme="light"] {
color-scheme: light;
--primary-rgb: 138,100,32;
--gold-rgb: 160,115,50;
--ink-rgb: 23,20,15;
--hero-glow: rgba(199,154,91,.22);
--bg-base: #faf7f1;
--bg-surface: #ffffff;
--bg-elevated: #f3eee4;
--bg-overlay: rgba(23,20,15,.45);
--bg-nav: rgba(250,247,241,.88);
/* Bronze, not the dark theme's gold: white text on it is 5.0:1. */
--primary: #8a6420;
--primary-hover: #9c7430;
--primary-active: #74531a;
--primary-alpha: rgba(138,100,32,.10);
--primary-soft: rgba(138,100,32,.10);
--text-primary: #17140f;
--text-secondary: #5c554a;
--text-muted: #8f877a;
--text-on-primary: #ffffff;
--border-subtle: #ece5d8;
--border-default: #ddd3c1;
--border-strong: #8a6420;
--gold: #a07332;
--shimmer-start: #8a6420;
--shimmer-mid: #c79a5b;
--shimmer-end: #6e4f18;
--info: #8a6420;
--warn: #8a5a00;
--success: #15803d;
}
/* ---- one language at a time: …… ---- */
html:not([data-lang="ru"]) [data-l="ru"],
html[data-lang="ru"] [data-l="en"] { display: none !important; }
/* ---- header controls ---- */
.prefs { display: inline-flex; align-items: center; gap: 8px; }
.lang-sw {
display: inline-flex;
padding: 3px;
border-radius: 12px;
border: 1px solid var(--border-default);
background: var(--bg-surface);
}
.lang-sw button {
font: 600 12px/1 'Inter', system-ui, sans-serif;
letter-spacing: .08em;
color: var(--text-muted);
background: transparent;
border: 0;
border-radius: 9px;
padding: 7px 10px;
cursor: pointer;
transition: background .2s, color .2s, box-shadow .2s;
}
.lang-sw button:hover { color: var(--text-primary); }
.lang-sw button[aria-pressed="true"] {
color: var(--text-primary);
background: var(--bg-elevated);
box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 0 0 1px var(--border-default);
}
.theme-sw {
width: 34px; height: 34px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 10px;
border: 1px solid var(--border-default);
background: var(--bg-surface);
color: var(--text-secondary);
cursor: pointer;
transition: color .2s, border-color .2s;
}
.theme-sw:hover { color: var(--primary); border-color: rgba(var(--primary-rgb), .45); }
.theme-sw svg { width: 16px; height: 16px; }
/* Shows where a click takes you: the sun in the dark theme, the moon in the light one. */
:root:not([data-theme="light"]) .theme-sw .i-moon,
:root[data-theme="light"] .theme-sw .i-sun { display: none; }
.lang-sw button:focus-visible,
.theme-sw:focus-visible { outline: 2px solid rgba(var(--primary-rgb), .7); outline-offset: 2px; }
@media (max-width: 900px) {
.prefs { gap: 6px; }
.lang-sw button { padding: 6px 8px; }
.theme-sw { width: 32px; height: 32px; }
}