/* ==========================================================================
   Dark theme — <html data-theme="dark"> (switch in the header and footer,
   choice remembered in localStorage). Tokens first, then the components that
   use fixed light colours. Product photos and brand logos keep a light
   backdrop so white-background images still look right.
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #1e2227;
  --c-bg-subtle: #252a30;
  --c-surface: #2a2f36;
  --c-surface-2: #31373f;
  --c-ink: #f2f1ee;
  --c-graphite: #dedcd7;
  --c-text: #e7e6e2;
  --c-muted: #a6a6ac;
  --c-faint: #a0a0a7;
  --c-border: #3a4048;
  --c-border-strong: #4a515b;
  --c-accent: #78d850;
  --c-accent-soft: #18261a;
  --c-success-soft: #13261a;
  --c-warning-soft: #2a2112;
  --c-error-soft: #2c1615;
  --c-focus: #78d850;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
  --shadow: 0 10px 30px -12px rgb(0 0 0 / 60%), 0 2px 6px rgb(0 0 0 / 30%);
  --shadow-lg: 0 30px 70px -30px rgb(0 0 0 / 80%);
}

[data-theme="dark"] body { background: var(--c-bg); color: var(--c-text); }

/* Buttons: ink is light now, so text on ink must be dark */
[data-theme="dark"] .btn { --btn-fg: #0f1012; }
[data-theme="dark"] .btn--secondary, [data-theme="dark"] .btn--ghost { --btn-fg: var(--c-ink); }
[data-theme="dark"] .btn--light { --btn-bg: #f2f1ee; --btn-fg: #0f1012; --btn-border: #f2f1ee; }
[data-theme="dark"] .btn--danger { --btn-fg: #fff; }

/* Header / logo */
[data-theme="dark"] .site-header { background: rgb(30 34 39 / 58%); border-color: rgb(255 255 255 / 7%); box-shadow: inset 0 -1px 0 rgb(255 255 255 / 4%); }
[data-theme="dark"] .site-header.is-scrolled { border-color: rgb(255 255 255 / 10%); box-shadow: 0 8px 24px -14px rgb(0 0 0 / 60%); }
[data-theme="dark"] .site-header .brand-logo--dark, [data-theme="dark"] .drawer .brand-logo--dark { display: none; }
[data-theme="dark"] .site-header .brand-logo--light, [data-theme="dark"] .drawer .brand-logo--light { display: block; }

/* Product cards: dark card, light photo area */
/* Dark card: navy tile; the photo panel stays light (product photos have white backgrounds) */
[data-theme="dark"] .product-card { background: #141821; border-color: #232836; box-shadow: none; }
[data-theme="dark"] .product-card:hover { border-color: #313849; box-shadow: 0 18px 40px -22px rgb(0 0 0 / 80%); }
[data-theme="dark"] .product-card__media { background: radial-gradient(110% 90% at 50% 35%, #ffffff 0%, #e9eaee 85%); }
[data-theme="dark"] .product-card__media .product-card__brand { color: #2a2b2e; }
[data-theme="dark"] .product-card__actions { background: rgb(255 255 255 / 70%); }
[data-theme="dark"] .product-card__actions .icon-btn { color: #4a4d55; }
[data-theme="dark"] .product-card__actions .icon-btn:hover { color: #0f1012; }
[data-theme="dark"] .product-card__buy { border-color: #232836; }
[data-theme="dark"] .product-card__cart { background: var(--c-accent); color: #0f1012; box-shadow: 0 10px 22px -12px rgb(120 216 80 / 55%); }
[data-theme="dark"] .product-card__cart:hover { background: #8fe46a; }
[data-theme="dark"] .product-card__cart--ghost, [data-theme="dark"] .product-card__cart--ghost:hover { background: var(--c-surface); }
[data-theme="dark"] .gallery__stage, [data-theme="dark"] .gallery__thumb, [data-theme="dark"] .cart-line__img,
[data-theme="dark"] .notify__thumb, [data-theme="dark"] .invoice__thumb, [data-theme="dark"] .search-item__img { background: #f1efea; }
/* Multiply blending (light theme) would sink the photo into the dark panel */
[data-theme="dark"] .search-item__img { mix-blend-mode: normal; }

/* Forms */
[data-theme="dark"] .input, [data-theme="dark"] .select, [data-theme="dark"] .textarea { background-color: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border-strong); }
/* Keep the select arrow (a "background" shorthand would wipe it), in a light stroke */
[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a5ab' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
[data-theme="dark"] .tool-select .select { background-color: transparent; }
/* Native dropdown lists: the select's light text on the browser's white list was unreadable. */
[data-theme="dark"] select option,
[data-theme="dark"] select optgroup { background-color: var(--c-surface); color: var(--c-text); }
[data-theme="dark"] select option:checked { background-color: var(--c-surface-2); color: var(--c-ink); }
[data-theme="dark"] .check input[type="radio"]:checked::after { background: #0f1012; }
[data-theme="dark"] .range input[type="range"]::-webkit-slider-thumb { background: #0f1012; border-color: var(--c-ink); }
[data-theme="dark"] .range input[type="range"]::-moz-range-thumb { background: #0f1012; border-color: var(--c-ink); }
[data-theme="dark"] .range__ghost { background: rgb(242 241 238 / 28%); }

/* Home page pieces with fixed light colours */
[data-theme="dark"] .seg__btn[aria-selected="true"] { background: var(--c-surface-2); color: var(--c-ink); }
[data-theme="dark"] .sol-tile__arrow { background: rgb(22 23 26 / 85%); color: var(--c-ink); }
[data-theme="dark"] .sol-tile:hover .sol-tile__arrow { background: var(--c-surface); }
[data-theme="dark"] .stories__btn { background: var(--c-surface); color: var(--c-ink); }
[data-theme="dark"] .process__num, [data-theme="dark"] .process-step__num { background: var(--c-surface); }
/* Brand grid keeps light cells (logos are designed for light backgrounds) */
[data-theme="dark"] .logos__cell::after { /* green crosses, matching the footer line */
  background: linear-gradient(var(--c-brand, #78d850), var(--c-brand, #78d850)) center / 100% 1.5px no-repeat, linear-gradient(var(--c-brand, #78d850), var(--c-brand, #78d850)) center / 1.5px 100% no-repeat; }

/* Badges / tooltips drawn on white */
[data-theme="dark"] .badge { background: var(--c-surface-2); }
[data-theme="dark"] .badge--accent { background: var(--c-accent-soft); color: var(--c-accent); }
[data-theme="dark"] .badge--dark { background: #f2f1ee; color: #0f1012; }

/* Invoice printout always prints light */
@media print { [data-theme="dark"] { color-scheme: light; } }

/* ── Theme switch (sun · toggle · moon) ── */
/* Light / dark button: a rounded square like the header icons, moon in light mode and sun in dark mode. */
.theme-toggle { display: inline-grid; place-items: center; flex: none; width: 42px; height: 42px; padding: 0; border: 1px solid var(--c-border); border-radius: 12px;
  background: var(--c-bg-subtle); color: var(--c-ink); cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.theme-toggle:hover { color: var(--c-accent); border-color: var(--c-accent); }
.theme-toggle .icon { width: 20px; height: 20px; }
.theme-toggle__sun, [data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; color: var(--c-accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.site-header .theme-toggle { width: var(--hctl, 42px); height: var(--hctl, 42px); }

/* Buttons that are light-on-dark by design keep their light text */
[data-theme="dark"] .btn--outline-light { --btn-fg: #fff; }
/* Category tiles: dark tile, icons drawn in light strokes */
[data-theme="dark"] .cat-tile { background: var(--c-surface); border-color: var(--c-border); }
[data-theme="dark"] .cat-tile__img:has(.cat-icon) { background: radial-gradient(circle at 50% 45%, rgb(255 255 255 / 7%) 0%, rgb(255 255 255 / 0%) 70%); }
[data-theme="dark"] .icon-btn__count { color: #0f1012; }

/* Text selection: the light-theme colours (ink on white) vanish on dark */
[data-theme="dark"] ::selection { background: var(--c-accent); color: #0f1012; }
/* Search results: a clearly visible hover / keyboard-selected row */
[data-theme="dark"] .search-item:hover, [data-theme="dark"] .search-item.is-active { background: #26282e; box-shadow: inset 0 0 0 1px rgb(201 164 107 / 45%); }
[data-theme="dark"] .search-item.is-active .search-item__name { color: var(--c-accent); }
[data-theme="dark"] .search-all:hover, [data-theme="dark"] .search-all.is-active { background: #26282e; }

/* Catalog toolbar: active column button */
[data-theme="dark"] .grid-switch button[aria-pressed="true"] { background: var(--c-accent); color: #0f1012; }
[data-theme="dark"] .cat-bar.is-floating .cat-bar__list { box-shadow: 0 10px 30px -12px rgb(0 0 0 / 70%); }
/* Home glass bars over the hero */
[data-theme="dark"] .page-home .site-header:not(.is-scrolled) { background: rgb(15 16 18 / 34%); border-color: rgb(255 255 255 / 8%); }
[data-theme="dark"] .page-home .cat-bar:not(.is-floating) .cat-bar__list { background: rgb(15 16 18 / 55%); border-color: rgb(255 255 255 / 10%); }
[data-theme="dark"] .page-home .cat-bar:not(.is-floating) .cat-bar__link:hover { background: rgb(255 255 255 / 8%); }
[data-theme="dark"] .page-home .header-search { background: rgb(255 255 255 / 10%); }
[data-theme="dark"] .page-home .hero-slider::before { background: linear-gradient(rgb(0 0 0 / 30%), transparent); }

/* Charcoal, not black: "contact" button is a green outline; brand logos sit on a light band so dark wordmarks stay visible. */
[data-theme="dark"] .product-card__cart--ghost,
[data-theme="dark"] .product-card__cart--ghost:hover { background: transparent; color: var(--c-accent); box-shadow: inset 0 0 0 1.5px var(--c-accent); }
[data-theme="dark"] .product-card__cart--ghost:hover { background: rgb(120 216 80 / 12%); }
[data-theme="dark"] .logo-strip, [data-theme="dark"] .logo-strip__box { --c-bg-subtle: #f3f5f3; background: #f3f5f3; border-color: transparent; }
/* Footer: the same near-black band with the green top line in both themes. */
[data-theme="dark"] .site-footer { background: #0b0b0d; border-block-start: 3px solid var(--c-brand, #78d850); }

/* Colour swatches: a light ring so black / dark colours stay visible on dark surfaces. */
[data-theme="dark"] .product-card__colors li:not(.more),
[data-theme="dark"] .product-card__colors button,
[data-theme="dark"] .color-picker__swatch,
[data-theme="dark"] .cart-line__swatch { border-color: rgb(255 255 255 / 55%); }