/* ============================================================ THEME — every colour on the site is defined here, and only here, as a greyscale palette, along with layout knobs like the gallery column counts. Tweak these variables to re-skin the whole site. Light/dark: the header toggle sets data-theme="light|dark" on (persisted in localStorage). With no saved choice the OS preference applies. If you change a colour in the DARK THEME block, mirror it in the no-JS fallback block at the bottom. The font is set in js/config.js (the `font` field) — it is loaded from Google Fonts and applied automatically. The stack below is only the fallback while it loads (or if JavaScript is disabled). ============================================================ */ :root { /* -- greyscale palette, light to dark -- */ --grey-50: #fafafa; --grey-100: #f0f0f0; --grey-200: #e0e0e0; --grey-300: #c4c4c4; --grey-400: #9c9c9c; --grey-500: #6e6e6e; --grey-600: #4b4b4b; --grey-700: #2e2e2e; --grey-800: #1c1c1c; --grey-900: #111111; /* -- semantic roles (LIGHT THEME) -- */ --bg: var(--grey-50); --surface: #ffffff; --text: var(--grey-900); --text-muted: var(--grey-500); --border: var(--grey-200); --accent: var(--grey-800); /* buttons, links, emphasis */ --accent-text: var(--grey-50); /* text on top of --accent */ --tag-bg: var(--grey-100); /* status tags */ --tag-text: var(--grey-600); /* -- typography -- */ --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* -- gallery layout -- */ --gallery-columns: 4; /* tiles per row on desktop */ --gallery-columns-mobile: 3; /* tiles per row below the mobile breakpoint */ } /* -- semantic roles (DARK THEME) — same greys, inverted -- */ :root[data-theme="dark"] { --bg: var(--grey-900); --surface: var(--grey-800); --text: var(--grey-100); --text-muted: var(--grey-400); --border: var(--grey-700); --accent: var(--grey-100); --accent-text: var(--grey-900); --tag-bg: var(--grey-700); --tag-text: var(--grey-300); } /* No-JS fallback: follow the OS preference when no explicit choice has been applied. Mirrors the dark block above. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: var(--grey-900); --surface: var(--grey-800); --text: var(--grey-100); --text-muted: var(--grey-400); --border: var(--grey-700); --accent: var(--grey-100); --accent-text: var(--grey-900); --tag-bg: var(--grey-700); --tag-text: var(--grey-300); } }