/* ========================================================================== Dark theme. All rules are scoped to html[data-theme="dark"], so this file is inert in light mode. The theme is chosen before paint by an inline script in (saved choice, else the visitor's system preference) and toggled from the footer (theme-toggle.js). The brand red (#891A1C) and dark red (#410708) are used as TEXT all over the light theme; on a dark background those are unreadable, so here they are remapped to lightened, accessible variants. Red BACKGROUNDS (header, footer, buttons) are left untouched — they work on any background. ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; --dk-bg: #16181d; /* page background */ --dk-surface: #1e2128; /* cards / raised surfaces */ --dk-text: #e8e8e8; /* default body text */ --dk-muted: #b6b6b6; /* secondary / muted text */ --dk-accent: #ef7d80; /* lightened brand red */ --dk-accent-2: #e0a9aa; /* lightened secondary red */ --dk-border: rgba(239, 125, 128, 0.35); background-color: var(--dk-bg); } html[data-theme="dark"] body { background-color: var(--dk-bg); color: var(--dk-text); } /* ---- Light surfaces -> dark ------------------------------------------------ */ html[data-theme="dark"] .program-area { background-color: var(--dk-bg); } html[data-theme="dark"] .spectacle-team .container { background-color: var(--dk-surface); } /* ---- Section titles -------------------------------------------------------- */ html[data-theme="dark"] .section-title h1, html[data-theme="dark"] .section-title h2 { color: var(--dk-accent); } html[data-theme="dark"] .section-title h2 span { color: var(--dk-muted); } /* ---- Elements whose text was the brand red -> accent ----------------------- */ html[data-theme="dark"] .news-item a, html[data-theme="dark"] .news-item .title, html[data-theme="dark"] .events-area .event .title, html[data-theme="dark"] .events-area .events-date, html[data-theme="dark"] .spectacles-area .spectacle-info .from, html[data-theme="dark"] .program-area .nav-tabs .nav-link, html[data-theme="dark"] .spectacles-area .nav-tabs .nav-link, html[data-theme="dark"] .theatre-page-nav .nav-tabs .nav-link, html[data-theme="dark"] .program-area .nav-tabs .nav-link.active, html[data-theme="dark"] .spectacles-area .nav-tabs .nav-link.active, html[data-theme="dark"] .theatre-page-nav .nav-tabs .nav-link.active { color: var(--dk-accent); } html[data-theme="dark"] .spectacles-area .nav-tabs .nav-link.active, html[data-theme="dark"] .program-area .nav-tabs .nav-link.active { border-bottom-color: var(--dk-accent); } /* ---- Elements whose text was the dark secondary red -> lightened ----------- */ html[data-theme="dark"] .news-item .date, html[data-theme="dark"] .news-item .text, html[data-theme="dark"] .events-area .event .scene, html[data-theme="dark"] .events-area .event .date, html[data-theme="dark"] .spectacles-area .spectacle-info .name, html[data-theme="dark"] .color-secondary, html[data-theme="dark"] .contacts p { color: var(--dk-accent-2); } /* ---- Borders that used the dark red --------------------------------------- */ html[data-theme="dark"] .events-area .events-date, html[data-theme="dark"] .events-area .events-day-row, html[data-theme="dark"] .events-area .event:not(:last-child), html[data-theme="dark"] .events-area .events-month { border-color: var(--dk-border) !important; } /* ---- Editable page content (history, scenes, concourse, footer pages…) ----- */ html[data-theme="dark"] .area, html[data-theme="dark"] .about-us-area, html[data-theme="dark"] .single-text, html[data-theme="dark"] .pages-area { color: var(--dk-text); } html[data-theme="dark"] .about-us-area a, html[data-theme="dark"] .single-text a, html[data-theme="dark"] .pages-area a { color: var(--dk-accent); } /* ---- Generic form controls ------------------------------------------------- */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--dk-surface); color: var(--dk-text); border-color: var(--dk-border); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--dk-muted); } /* ---- Tables in editable content ------------------------------------------- */ html[data-theme="dark"] table { color: var(--dk-text); } html[data-theme="dark"] table, html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: var(--dk-border); } /* ---- Pagination (kept for any non-converted lists) ------------------------- */ html[data-theme="dark"] .pagination .page-link { background-color: var(--dk-surface); border-color: var(--dk-border); color: var(--dk-accent); } html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: var(--dk-accent); border-color: var(--dk-accent); color: #16181d; }