:root { --primary-color: #3D7ED3; --primary-color-darker: rgba(43, 54, 72, 0.702); --secondary-color: #E9B01E ; --background-color: #282931; --background-color-lighter: #313240; --color-light: #F5F5F5; --light-grey: #D9D9D9; --grey-darker: rgba(66, 67, 73, 0.702); --text-color: #F5F5F5; /* Navbar + footer stay on this fixed dark tone in both themes — their text (Bootstrap text-light, hardcoded white rgba() in the footer) is not theme-aware, so the chrome around the page keeps the dark look that text was designed for. */ --chrome-background-color: #313240; /* Fixed light text for elements that should stay this color regardless of theme (EN/DE toggle label on the dark navbar chrome, story card date badge). */ --chrome-text-color: #F5F5F5; /* The original dark-mode page background, for elements pinned to it regardless of theme (splash screen, transparent story images). */ --dark-page-background: #282931; --radius-mobile: 6px; --radius-desktop: 12px; --radius-small-desktop: 8px; --shadow-sm: 0 1px 2px rgba(20, 20, 25, 0.06), 0 1px 1px rgba(20, 20, 25, 0.04); --shadow-md: 0 8px 24px rgba(20, 20, 25, 0.08), 0 2px 6px rgba(20, 20, 25, 0.05); --shadow-lg: 0 20px 48px rgba(20, 20, 25, 0.14), 0 6px 16px rgba(20, 20, 25, 0.08); --ease: cubic-bezier(0.22, 1, 0.36, 1); --transition-fast: 0.18s var(--ease); --transition-base: 0.28s var(--ease); } /* Our desktop working range (768–1999px): use the smaller corner radius everywhere --radius-desktop is referenced, without touching mobile (<768px) or the ≥2000px tier. */ @media (min-width: 768px) and (max-width: 1999px) { :root { --radius-desktop: var(--radius-small-desktop); } } /* Light theme. Toggled by adding data-theme="light" to (js/theme-toggle.js), persisted in localStorage. --chrome-background-color is intentionally left out here — navbar/footer stay dark in both themes. */ :root[data-theme="light"] { --primary-color-darker: rgba(61, 126, 211, 0.14); --background-color: #F2F3F6; --background-color-lighter: #FFFFFF; --light-grey: #2B2D33; --grey-darker: rgba(0, 0, 0, 0.08); --text-color: #22242B; }