/*
 * The site's colours, and the schemes a visitor can switch between
 * (public/js/color-scheme.js). Their choice lives in localStorage as
 * gallery-colour-scheme and is applied to <html> by scheme-boot.js
 * before any stylesheet loads, so a returning visitor sees their own
 * colours rather than a flash of the default.
 *
 * In its own file because two pages need it and they share nothing
 * else: index.html, which loads styles.css after this, and
 * public/names.html, whose names.css is otherwise standalone. Keeping
 * one definition is the point - a second copy would drift, and the
 * schemes would silently stop matching between the two pages.
 *
 * Every component reads its colours from these properties, so a new
 * scheme is this block and nothing else.
 */

:root {
    --primary-color: #3d566e;
    --secondary-color: #34495e;
    --accent-color: #1C26E4; /* rgb(28, 38, 228) */
    --text-color: #333;
    --light-bg: #f8f9fa;
    --white: #ffffff;
    --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.15);
    /* The fixed header's rendered height (80px desktop, 60px on the
       768px breakpoint below) plus a visible gap before the sidebar,
       the page content and the sticky toolbars begin. Kept as
       variables because that height is otherwise repeated as a plain
       number in several unrelated-looking rules that all have to
       agree with each other. */
    --header-height: 80px;
    --header-height-mobile: 60px;
    --header-gap: 12px;
    --sidebar-width: 280px;
    /* The third "palette dab" colour in the header logo mark
       (public/index.html's inline SVG) - not used anywhere else, so a
       scheme only needs to give it a value if the logo should actually
       change colour with that scheme (see the html[data-scheme="..."]
       blocks below). */
    --logo-accent-2: #D98C34;
}

/* Colour schemes (public/js/color-scheme.js) - a visitor's own choice,
   remembered only in their browser via localStorage, never sent to the
   server or shared with anyone else. Every component already reads its
   colours from the custom properties above, so overriding just these
   re-themes the whole site with no other CSS to touch. "Classic" is
   the block above and has no override here. */
html[data-scheme="gallery-wall"] {
    --primary-color: #3A332E;
    --secondary-color: #5A4F46;
    --accent-color: #A8532E;
    --text-color: #2A2521;
    --light-bg: #F1E9DD;
    --logo-accent-2: #3E7A6E;
}

html[data-scheme="artists-studio"] {
    --primary-color: #24382F;
    --secondary-color: #375346;
    --accent-color: #9A7130;
    --text-color: #211E19;
    --light-bg: #F3EEE2;
    --logo-accent-2: #8B3A3A;
}

html[data-scheme="printmakers-ink"] {
    --primary-color: #26384A;
    --secondary-color: #3A5064;
    --accent-color: #A66A24;
    --text-color: #232323;
    --light-bg: #EFEAE0;
    --logo-accent-2: #B23A2E;
}

html[data-scheme="pigment-box"] {
    --primary-color: #3A2350;
    --secondary-color: #5C3E7A;
    --accent-color: #C2185B;
    --text-color: #241C2B;
    --light-bg: #F6F0F7;
    --logo-accent-2: #1E8A7A;
}

html[data-scheme="neon-noir"] {
    --primary-color: #121216;
    --secondary-color: #33333C;
    --accent-color: #C4006A;
    --text-color: #17171A;
    --light-bg: #F2F2EF;
    --logo-accent-2: #00C2B2;
}