/* Dark mode. The Webflow CSS colours everything through the variables below, so the
   theme re-maps them; the rules further down patch the few hardcoded colours.
   html[data-theme] is set before paint by the script in Layout.astro. */

html { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;
  --_colors---background: #161514;
  --_colors---secondary: #201f1d;
  --_colors---tertiary: #2c2a27;
  --_colors---border: #3d3a36;
  --_colors---text: #f0ede8;
  --_colors---text-secondary: #cbc6be;
  --_colors---accent: #e0524a;
  --_colors---accent-light: #3d1b19;
  --_colors---success: #4cc48a;
  --_colors---success-light: #173626;
  --black: #f0ede8;
  --white: #161514;
  --background-primary: #1b1a19;
  --gray: #262421;
  --border-color-dark: #7a7671;
  --text-color-gray: #8f8a83;
  --text-color-secondary: #a9b0bf;
  /* Blocks designed as dark-on-light flip to light-on-dark. */
  --background-primary-dark: #edecda;
  --text-color-primary-dark: #16161a;
}

/* Webflow sets the light palette again on these classes; give them the dark one. */
html[data-theme="dark"] :is(.body, .body-2, .hero-intro-block, .hero-cta-block, .image-18, .sticky-heading, .view-all-button-inner.dark-mode) {
  --_colors---background: #161514;
  --_colors---secondary: #201f1d;
  --_colors---tertiary: #2c2a27;
  --_colors---border: #3d3a36;
  --_colors---text: #f0ede8;
  --_colors---text-secondary: #cbc6be;
  --_colors---accent: #e0524a;
  --_colors---accent-light: #3d1b19;
  --_colors---success: #4cc48a;
  --_colors---success-light: #173626;
}

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

/* Hairlines drawn in plain black */
html[data-theme="dark"] :is(.contact-hero-image-wrapper, .hero-images-block, .collection-list-wrapper, .heading, .collection-list-wrapper-4, .st, .work-image-block, .partner-logo-block-05, .image-21, .hero-theme-changer-block) {
  border-color: var(--_colors---border);
}
html[data-theme="dark"] .spotlight-index a[href="/works"]:not(#_),
html[data-theme="dark"] a.spot-mob-viewall:not(#_) { border-color: var(--_colors---border) !important; }

/* Logos are dark artwork on transparent backgrounds: show them in white. */
html[data-theme="dark"] :is(.home-partners-logo, .hero-intro-logo:not([src$=".avif"]):not([src$=".png"]):not([src$=".jpg"]):not([src$=".jpeg"]):not([src$=".webp"]), .nav-ark-image, .icon-24px) {
  filter: brightness(0) invert(1);
}
html[data-theme="dark"] .vs-spot .txt .meta img { filter: brightness(0) invert(1); }

/* Icons and arrows shipped as black SVGs */
html[data-theme="dark"] :is(.icon-22px, .icon-36px)[src*="dark"],
html[data-theme="dark"] img[src*="chaveron-right"],
html[data-theme="dark"] img[src*="arrow-right.svg"],
html[data-theme="dark"] img[src*="cta-arrow-up-icon"] { filter: invert(1); }

/* Theme toggle in the nav */
.vs-theme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 6px; padding: 0; border: 0; background: none; color: var(--_colors---accent, #931914); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vs-theme svg { width: 22px; height: 22px; display: block; overflow: visible; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.vs-theme circle, .vs-theme path { stroke: currentColor; stroke-width: .8; fill: none; vector-effect: non-scaling-stroke; }
.vs-theme .t-half { fill: currentColor; stroke: none; }
.vs-theme:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
html[data-theme="dark"] .vs-theme svg { transform: rotate(180deg); }
@media (max-width: 767px) { .vs-theme { width: 36px; height: 36px; margin-right: 2px; } .vs-theme svg { width: 20px; height: 20px; } }

/* Brief cross-fade when switching */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease, filter .35s ease !important;
}

/* Case study section icons: white glyphs on a text-coloured box, so flip them with the box. */
html[data-theme="dark"] :is(.ikonik-og6vi, .ikonik-1g37o, .ikonik-uk77g, .ikonik-hzlkgj, .ikonik-0q55li, .ikonik-pfgls, .ikonik-4kidj, .ikonik-hmgl7, .ikonik-ipri, .ikonik-tif3c) { color: var(--_colors---background); }
html[data-theme="dark"] { --icon-color: #f0ede8; }