/* The two looks of the site, after the studio's interior of black and oak:
   "loft-light" (the default: sand and oak, black as the accent) and "loft"
   (black with oak). style.css is the base; this file sets the colours and
   the loft details over it. The theme sits on <html data-theme>. */

[data-theme='loft-light'] {
  --ink: #1d1814;
  --ink-soft: #6f6052;
  --accent: #8a5a3b;
  /* Headings, main buttons, the contact block: black, the accent here. */
  --accent-dark: #1d1814;
  --gold: #a0703f;
  --wash: #ece0d0;
  --wash-2: #e2d0b8;
  --card: #f7efe4;
  --line: #d6c3aa;

  --oak: #a0703f;
  --black: #161310;
  --frame: 18px;
}

[data-theme='loft'] {
  color-scheme: dark;
  --ink: #ebe5dc;
  --ink-soft: #a39a90;
  --accent: #c49a6c;
  /* Headings read light on black; style.css colours them with this token. */
  --accent-dark: #f3ede5;
  --gold: #c49a6c;
  --wash: #121212;
  --wash-2: #1d1c1a;
  --card: #1a1918;
  --line: #2f2c29;

  --oak: #c49a6c;
  --black: #0b0b0b;
  --frame: 18px;
}

[data-theme^='loft'] ::selection {
  background: var(--oak);
  color: var(--black);
}

/* ---------- type ---------- */

[data-theme^='loft'] .eyebrow,
[data-theme^='loft'] h1 em,
[data-theme^='loft'] h2 em {
  color: var(--oak);
}

[data-theme^='loft'] .nav a:not(.btn) {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

[data-theme^='loft'] .brand-name {
  color: var(--ink);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 22px;
}

/* ---------- surfaces: sharp corners, hairlines ---------- */

[data-theme^='loft'] .card,
[data-theme^='loft'] .aside,
[data-theme^='loft'] .map,
[data-theme^='loft'] .hero-photo,
[data-theme^='loft'] .about-photo {
  border-radius: 2px;
}

[data-theme^='loft'] .card {
  border-top: 2px solid var(--oak);
}

[data-theme='loft-light'] .header.scrolled {
  background: rgb(236 224 208 / 88%);
}

[data-theme='loft'] .header.scrolled {
  background: rgb(18 18 18 / 86%);
}

[data-theme='loft'] .treatments {
  background: var(--black);
}

/* ---------- photos framed in oak, set off the wall ---------- */

[data-theme^='loft'] .hero-photo {
  overflow: visible;
}

[data-theme^='loft'] .hero-photo,
[data-theme^='loft'] .about-photo {
  border-radius: 2px;
  overflow: visible;
  box-shadow:
    var(--frame) var(--frame) 0 -1px var(--wash),
    var(--frame) var(--frame) 0 0 var(--oak);
}

/* The frame slides out from behind the photo once the curtain has passed. */
@media (prefers-reduced-motion: no-preference) {
  [data-theme^='loft'].js .reveal-frame {
    transition: box-shadow 1.2s var(--ease-out) calc(var(--delay, 0s) + 1.1s);
  }

  [data-theme^='loft'].js .reveal-frame:not(.visible) {
    box-shadow:
      0 0 0 -1px var(--wash),
      0 0 0 0 var(--oak);
  }
}

/* ---------- buttons ---------- */

[data-theme^='loft'] .btn {
  border-radius: 2px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 13px;
}

[data-theme='loft'] .btn {
  border-color: var(--ink);
}

[data-theme='loft'] .btn-solid {
  background: var(--oak);
  border-color: var(--oak);
  color: var(--black);
}

[data-theme^='loft'] .btn-solid:hover {
  background: var(--oak);
  border-color: var(--oak);
  color: var(--black);
}

[data-theme='loft'] .btn-solid:hover {
  background: var(--ink);
  border-color: var(--ink);
}

[data-theme='loft'] .btn-ghost:hover {
  background: var(--ink);
  color: var(--black);
}

/* ---------- the oak beam: the marquee on a wood grain ---------- */

[data-theme^='loft'] .marquee {
  border: none;
  background:
    repeating-linear-gradient(
      180deg,
      rgb(0 0 0 / 0%) 0 3px,
      rgb(80 50 20 / 14%) 3px 4px,
      rgb(0 0 0 / 0%) 4px 9px,
      rgb(80 50 20 / 9%) 9px 11px
    ),
    linear-gradient(180deg, #c99f72, #b8895a 55%, #c49a6c);
}

[data-theme^='loft'] .marquee span {
  color: #161310;
}

[data-theme^='loft'] .marquee span::after {
  color: #161310;
  opacity: 0.5;
}

/* ---------- prices ---------- */

[data-theme^='loft'] .price-list .price {
  color: var(--oak);
}

/* ---------- contact and footer: black in both looks ---------- */

[data-theme^='loft'] .contact,
[data-theme^='loft'] .footer {
  background: var(--black);
}

[data-theme^='loft'] .contact {
  color: #ebe5dc;
}

[data-theme^='loft'] .contact h2 {
  color: #f3ede5;
}

[data-theme^='loft'] .contact em {
  color: var(--oak);
}

[data-theme^='loft'] .contact .btn-ghost {
  color: #ebe5dc;
  border-color: #ebe5dc;
}

[data-theme^='loft'] .contact .btn-ghost:hover {
  background: #ebe5dc;
  color: var(--black);
}

[data-theme^='loft'] .contact .btn-solid {
  background: var(--oak);
  border-color: var(--oak);
  color: var(--black);
}

[data-theme='loft'] .contact {
  border-top: 1px solid var(--line);
}

[data-theme^='loft'] .map {
  border: 1px solid rgb(255 255 255 / 10%);
}

[data-theme^='loft'] .map-pin {
  background: var(--oak);
}

/* ---------- the light/dark toggle in the header ---------- */

.theme-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle:focus-visible {
  outline: 1px solid var(--oak);
  outline-offset: 2px;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
}

/* The moon offers the dark look, the sun the light one. */
[data-theme='loft'] .theme-toggle .moon,
[data-theme='loft-light'] .theme-toggle .sun {
  display: none;
}

/* ---------- side rail ---------- */

[data-theme^='loft'] .side-rail {
  background: var(--black);
}

[data-theme='loft-light'] .side-rail a {
  background: var(--wash);
  color: var(--black);
}

[data-theme='loft'] .side-rail {
  border: 1px solid var(--line);
}

[data-theme='loft'] .side-rail a {
  background: var(--oak);
  color: var(--black);
}

/* ---------- reviews slider ---------- */

[data-theme^='loft'] .slider-controls button {
  border-radius: 2px;
}

[data-theme^='loft'] .slide-stars {
  color: var(--oak);
}

[data-theme^='loft'] .slider-progress i {
  background: var(--oak);
}