/* ==========================================================================
   SkinTech Lab — light / dark themes
   Loads after styles.css. Six base colours per theme; every muted tone and
   line is mixed from them, so changing a base colour carries through the page.
   ========================================================================== */
:root {
  color-scheme: light;
  --bg: #f4f3f0;
  --ink: #0d0d0d;
  --accent: #c98a72;
  --accent-ink: #0d0d0d;
  --band-bg: #0d0d0d;   /* the dark bands: CTA, core areas, contact, footer */
  --band-ink: #f4f3f0;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d0d;
  --ink: #f4f2ed;
  --accent: #c98a72;
  --accent-ink: #0d0d0d;
  --band-bg: #1b1a18;
  --band-ink: #f4f2ed;
}

/* No JavaScript: still follow the system setting */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0d0d0d;
    --ink: #f4f2ed;
    --accent: #c98a72;
    --accent-ink: #0d0d0d;
    --band-bg: #1b1a18;
    --band-ink: #f4f2ed;
  }
}

/* Derived tones (replace the fixed rgba values in styles.css) */
:root, :root[data-theme] {
  --ink-muted: color-mix(in srgb, var(--ink) 60%, transparent);
  --ink-muted-65: color-mix(in srgb, var(--ink) 65%, transparent);
  --ink-line: color-mix(in srgb, var(--ink) 12%, transparent);
  --ink-line-15: color-mix(in srgb, var(--ink) 15%, transparent);
  --inv: var(--band-ink);
  --inv-muted: color-mix(in srgb, var(--band-ink) 60%, transparent);
  --inv-line: color-mix(in srgb, var(--band-ink) 18%, transparent);
}

/* --------------------------------------------------------------------------
   Colours styles.css sets directly. Only colour properties are touched here,
   so spacing and layout changes in styles.css still apply.
   -------------------------------------------------------------------------- */
::selection { background: var(--ink); color: var(--bg); }
.dark ::selection { background: var(--band-ink); color: var(--band-bg); }

.dark { background: var(--band-bg); color: var(--band-ink); }
.site-header { background: color-mix(in srgb, var(--bg) 92%, transparent); }
.btn-outline { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.cap-col { border-top-color: var(--ink); }
.cert { -webkit-text-stroke-color: var(--ink); }
.stat-label { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.team-photo { background: color-mix(in srgb, var(--ink) 7%, var(--bg)); }

.contact-details { border-top-color: color-mix(in srgb, var(--band-ink) 20%, transparent); }
.contact-details span { color: color-mix(in srgb, var(--band-ink) 70%, transparent); }
.field label { color: color-mix(in srgb, var(--band-ink) 55%, transparent); }
.field input,
.field textarea { color: var(--band-ink); border-bottom-color: color-mix(in srgb, var(--band-ink) 40%, transparent); }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--band-ink); }
.form-note { color: color-mix(in srgb, var(--band-ink) 50%, transparent); }

.site-footer { border-top-color: color-mix(in srgb, var(--band-ink) 15%, transparent); }
.footer-label { color: color-mix(in srgb, var(--band-ink) 55%, transparent); }
.footer-dim { color: color-mix(in srgb, var(--band-ink) 75%, transparent); }
.footer-wordmark { color: color-mix(in srgb, var(--band-ink) 95%, transparent); }
.footer-legal {
  border-top-color: color-mix(in srgb, var(--band-ink) 15%, transparent);
  color: color-mix(in srgb, var(--band-ink) 55%, transparent);
}

/* Dark theme: soften the photos a touch so they don't glare */
:root[data-theme="dark"] .hero-media img,
:root[data-theme="dark"] .market-media img,
:root[data-theme="dark"] .about-media img { filter: brightness(0.92); }

/* --------------------------------------------------------------------------
   Theme toggle (inserted into the header by theme.js)
   -------------------------------------------------------------------------- */
.theme-toggle {
  position: relative; width: 40px; height: 40px; padding: 0; flex: none;
  display: inline-grid; place-items: center;
  background: none; border: 1px solid var(--ink-line-15); border-radius: 999px;
  color: inherit; cursor: pointer;
}
.theme-toggle:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Brief cross-fade when the visitor switches theme */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease !important;
}