/* ==========================================================================
   NEXIFY STUDIO: the light theme (website). LIGHT IS THE DEFAULT: the head
   script in index.html sets html[data-theme="light"] unless the visitor chose
   dark on a switch (localStorage 'nx:theme' = 'dark'; js/theme.js). With
   data-theme="dark" everything below is inert and the site is exactly the dark
   original.

   What changes: everything below the hero (every section, the booking
   planner, forms, cards, the footer), the floating glass navigation and its
   menu, and the scroll-edge band under it. Warm ivory paper, near-black ink,
   and the gold taken deeper (antique) so gold text keeps its contrast on a
   light page. Gold-leaf buttons stay gold leaf.
   What stays: the hero. It is a film and photographs of a dark, spotlit
   barbershop, so its type, glass and gold keep their dark-stage colours in
   both themes; so do labels and captions that sit on photographs and the
   photo lightbox.
   ========================================================================== */

/* ---- palette (only below the hero and in the floating bar) ----------------------- */
html[data-theme="light"] { color-scheme: light; background: #f5f0e7; }
html[data-theme="light"] body { background: #f5f0e7; }
html[data-theme="light"] :is(.sections, .footer, .gnav, .gnav-edge) {
  --c-bg: #f5f0e7;
  --c-bg-2: #ede6d8;
  --c-surface: #fffdf8;
  --c-fg: #17130d;
  --white: #17130d;
  --grey-body: #433b30;
  --grey-contact: #433b30;
  --grey-dim: #6b6153;
  --grey-rating: #7d5a1f;
  --tone-quiet: #6b6153;
  --line: rgba(122, 88, 32, 0.2);
  --line-strong: rgba(122, 88, 32, 0.38);
  --hairline: rgba(122, 88, 32, 0.2);
  --rule: rgba(122, 88, 32, 0.45);
  --panel: rgba(255, 255, 255, 0.64);
  --err: #a1402a;
  --gold-1: #7a561c;
  --gold-2: #a87a2e;
  --gold-3: #8c6322;
  --gold-4: #6b4a17;
  --gold-5: #4a3210;
  --gold-ink: #7d5a1f;
  --gold-text: linear-gradient(180deg, #b0803a 0%, #94692a 30%, #7a5420 58%, #5f4116 80%, #8f672c 100%);
  --gold-text-hi: linear-gradient(180deg, #c18f43 0%, #a37633 30%, #86602a 58%, #6b4b1c 80%, #9c7234 100%);
  --gold-line: rgba(122, 88, 32, 0.2);
  --gold-line-strong: rgba(122, 88, 32, 0.38);
  --gold-tint: rgba(184, 137, 60, 0.11);
  --gold-light: rgba(214, 170, 90, 0.16);
  color: var(--c-fg);
}
/* the photo lightbox and the labels laid over photographs keep the dark stage */
html[data-theme="light"] .lightbox {
  --grey-rating: #e3c17b; --gold-1: #f0d492; --gold-2: #dcb466;
  --line-strong: rgba(220, 180, 102, 0.42); --c-fg: #fff;
}
html[data-theme="light"] .gallery__cat { color: #e3c17b; }

/* ---- paper, light and hairlines ---------------------------------------------------- */
html[data-theme="light"] .sections,
html[data-theme="light"] .crew__pin::after,
html[data-theme="light"].mo-crew .sec--team.is-crew + .sec--gallery { background: var(--c-bg); }
html[data-theme="light"] .footer { background: var(--c-bg-2); }
html[data-theme="light"] .sec + .sec { border-top-color: rgba(122, 88, 32, 0.1); }
/* the spotlight falling from the top of each section: daylight from above */
html[data-theme="light"] .sec::before {
  background:
    radial-gradient(ellipse 34% 70% at 50% 0%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.3) 45%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 60% 55% at 50% 0%, rgba(214, 170, 90, 0.1), rgba(214, 170, 90, 0) 70%);
}
html[data-theme="light"] .sec--contact::before {
  background:
    radial-gradient(ellipse 40% 55% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 78%),
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(214, 170, 90, 0.14), rgba(214, 170, 90, 0) 70%);
}
html[data-theme="light"] .crew__stage::before {
  background:
    radial-gradient(ellipse 30% 72% at 66% 0%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 50% 60% at 50% 0%, rgba(214, 170, 90, 0.1), rgba(214, 170, 90, 0) 70%);
}
/* the big words behind each section: pressed into the paper (background-image
   only, so the text clip stays) */
html[data-theme="light"] .sec__giant {
  background-image: var(--gold-brush), radial-gradient(ellipse 60% 90% at 45% 0%, #dfcda7 0%, #e8dcc0 45%, #eee5d3 80%);
}
/* small gold numerals need the deeper gold to read at their size */
html[data-theme="light"] :is(.menu__index, .principle__num) { color: var(--gold-ink); }
html[data-theme="light"] .hours th,
html[data-theme="light"] .hours td { border-top-color: rgba(122, 88, 32, 0.13); }

/* ---- text that was white ------------------------------------------------------------ */
html[data-theme="light"] :is(
  .sec__title, .cta__title, .t-bold, .link-arrow, .menu__name, .menu__meta dd, .menu__book,
  .menu__item.is-tool .menu__index, .barber__name, .crew__name, .crew__win,
  .location__name, .location__facts dd, .location__facts a, .hours td,
  .bk__q, .bk__subq, .bk__opt, .bk__optmeta, .bk__sumrow dd, .bk__edit:hover, .bk__donetitle,
  .workshop__title, .workshop__facts dd, .principle__title,
  .contact-grid__list li, .contact-grid__list a, .footer__staff:hover
) { color: var(--c-fg); }
/* (.mo sits on <html> itself, so it joins the html selector: the bright line that runs
   across the lit About step would otherwise stay ivory on ivory paper) */
html[data-theme="light"].mo .principle::after { background: var(--gold-2); }
html[data-theme="light"] .sec :focus-visible { outline-color: var(--gold-3); }

/* ---- cards and the booking planner ------------------------------------------------------- */
html[data-theme="light"] .bk__panel {
  background: linear-gradient(180deg, #fffdf8 0%, #fbf6ec 100%);
  box-shadow: inset 0 1px 0 #fff, 0 34px 70px -46px rgba(80, 55, 10, 0.4), 0 2px 10px -6px rgba(80, 55, 10, 0.14);
}
html[data-theme="light"] .bk__opt:hover:not(:disabled) { background: rgba(255, 255, 255, 0.9); }
html[data-theme="light"] .bk__opt.is-on:not(.bk__date):not(.bk__slot) { background: rgba(214, 170, 90, 0.16); }   /* dates and times keep their gold leaf */
html[data-theme="light"] .bk__date.is-on,
html[data-theme="light"] .bk__slot.is-on { box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.8), 0 6px 14px -8px rgba(90, 58, 16, 0.5); }
html[data-theme="light"] .bk__field input,
html[data-theme="light"] .bk__field textarea,
html[data-theme="light"] .bk__field select { background: #fffefb; color: var(--c-fg); }
html[data-theme="light"] .bk__field input::placeholder,
html[data-theme="light"] .bk__field textarea::placeholder { color: rgba(67, 59, 48, 0.55); }
html[data-theme="light"] .bk__field input:focus,
html[data-theme="light"] .bk__field textarea:focus { background: #fff; }
html[data-theme="light"] .bk__check input { background-color: #fffefb; }
html[data-theme="light"] .bk__check input:focus-visible { outline-color: var(--gold-3); }
html[data-theme="light"] .bk__done { background: radial-gradient(ellipse 70% 60% at 50% 0%, var(--gold-light), transparent 70%), var(--c-surface); }
html[data-theme="light"] .loc-rating__live { filter: drop-shadow(0 0.03em 0.08em rgba(80, 55, 10, 0.22)); }
/* gold-leaf pills on paper (the hero's Book button is on the dark stage and keeps its shadow) */
html[data-theme="light"] :is(.sections, .footer) .pill--light { box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.8), inset 0 -1px 0 rgba(90, 58, 16, 0.25), 0 10px 22px -14px rgba(90, 58, 16, 0.55); }

/* ---- the floating glass navigation: light glass -------------------------------------------- */
/* milky enough that its dark gold type reads over the dark hero film on phones too */
html[data-theme="light"] .gnav .lg:not(.lg--milk) {
  --lg-tint: rgba(252, 249, 242, 0.78);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.16) 48%, rgba(255, 255, 255, 0.32) 100%),
    var(--lg-tint);
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.4) brightness(1.06);
  backdrop-filter: var(--lg-refract,) blur(var(--lg-blur)) saturate(1.4) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(122, 88, 32, 0.08),
    inset 0 0 22px rgba(255, 255, 255, 0.35),
    0 14px 32px -18px rgba(60, 40, 10, 0.38),
    0 2px 8px -3px rgba(60, 40, 10, 0.16);
}
html[data-theme="light"] .gnav .lg.is-lit:not(.lg--milk) {
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(122, 88, 32, 0.1),
    inset 0 0 26px rgba(255, 255, 255, 0.45),
    0 18px 38px -18px rgba(60, 40, 10, 0.45),
    0 3px 10px -3px rgba(60, 40, 10, 0.2);
}
html[data-theme="light"] .gnav .lg:not(.lg--milk)::before {
  background:
    radial-gradient(var(--lg-glow-w, 9rem) var(--lg-glow-h, 5rem) at var(--mx, 50%) var(--my, -40%), rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 45%);
}
html[data-theme="light"] .gnav .lg:not(.lg--milk)::after {
  background: linear-gradient(var(--rim-a, 155deg), rgba(255, 255, 255, 1), rgba(196, 156, 86, 0.3) 28%, rgba(150, 110, 50, 0.14) 60%, rgba(255, 255, 255, 0.7));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="light"] .gnav .lg:not(.lg--milk) { --lg-tint: rgba(252, 249, 242, 0.96); }
}
html[data-theme="light"] .gnav .lg-lens {
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4) 70%), rgba(214, 170, 90, 0.16);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(168, 122, 46, 0.28), inset 0 -5px 9px -6px rgba(120, 90, 40, 0.22), 0 5px 12px -7px rgba(60, 40, 10, 0.4);
}
html[data-theme="light"] .gnav .lg-lens.is-hover { background-color: rgba(214, 170, 90, 0.2); }
html[data-theme="light"] :is(.gnav__logo, .gnav__menubtn, .gnav__meta a) { color: var(--c-fg); }
html[data-theme="light"] .gnav .lg-links a:hover,
html[data-theme="light"] .gnav .lg-links a:focus-visible { text-shadow: none; }
/* the section in view: ink on the lens (it was white on the dark glass) */
html[data-theme="light"] .gnav__links a.is-active,
html[data-theme="light"] .gnav__links a:focus-visible { color: var(--c-fg); }
html[data-theme="light"] .gnav__rule { background: rgba(122, 88, 32, 0.16); }
html[data-theme="light"] .gnav__menubtn:focus-visible { outline-color: var(--gold-3); }
/* the switch on light glass: the resting moon in soft ink */
html[data-theme="light"] .gnav .tswitch__icon--moon { color: rgba(23, 19, 13, 0.42); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .gnav .tswitch:hover .tswitch__icon--moon { color: rgba(23, 19, 13, 0.78); }
}
/* the band under the bar fades content into the paper */
html[data-theme="light"] .gnav-edge { --edge-rgb: 245 240 231; }
/* a bar link under the cursor: ink on the light glass (css/glass.css turns it white for
   the dark glass; on the light glass that white all but vanished) */
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .gnav__links a:hover { color: var(--c-fg); }
}

/* ---- light is the default (2026-11-14): the remaining surfaces ---------------------------- */
/* The hero is a dark stage in both themes. As the sections slide over it, it recedes
   (scale 0.95) into its own dark; without this the paper showed as a pale frame round it. */
html[data-theme="light"].film-on .pin { background: #030303; }

/* Booking fields on paper: the field and the panel are both near-white, so the edge is
   what makes a field read as a field. A gold hairline at about 3:1 against the panel,
   a faint inner shade, and a soft gold ring on focus (the field drops its outline). */
html[data-theme="light"] .bk__field input,
html[data-theme="light"] .bk__field textarea,
html[data-theme="light"] .bk__field select {
  border-color: rgba(122, 88, 32, 0.7);
  box-shadow: inset 0 1px 2px rgba(60, 40, 10, 0.07);
}
html[data-theme="light"] .bk__field.has-error input { border-color: var(--err); }
html[data-theme="light"] .bk__field input:focus,
html[data-theme="light"] .bk__field textarea:focus {
  border-color: var(--gold-3);
  box-shadow: inset 0 1px 2px rgba(60, 40, 10, 0.07), 0 0 0 3px rgba(184, 137, 60, 0.2);
}
/* the consent box: its edge is the whole control */
html[data-theme="light"] .bk__check input { border-color: var(--gold-3); }
html[data-theme="light"] .bk__check input:checked { background-color: var(--gold-2); }   /* ticked: gold, as in dark (the paper fill above had hidden it) */
html[data-theme="light"] .bk__check.has-error input { border-color: var(--err); }

/* Booking choices (services, barbers, dates, times): cards on the panel, lifted by a soft
   warm shadow rather than lost in it. :where() keeps the selected, hover and gold-leaf
   states (css/identity.css, above) in charge of their own borders and fills. */
html[data-theme="light"] :where(.bk__opt) {
  background-color: #fffefb;
  border-color: rgba(122, 88, 32, 0.24);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(60, 40, 10, 0.05), 0 8px 18px -14px rgba(60, 40, 10, 0.3);
}
html[data-theme="light"] :where(.bk__opt:disabled) { box-shadow: none; }

/* placeholders keep their dashed underline visible on paper */
html[data-theme="light"] :is(.sections, .footer, .gnav) .ph { border-bottom-color: rgba(122, 88, 32, 0.42); }

/* the menu's arrow button under the cursor: a warm halo on paper, not a black one */
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .menu__book:hover { box-shadow: 0 0 0 6px rgba(184, 137, 60, 0.12), 0 8px 18px -8px rgba(80, 55, 10, 0.42); }
}

/* ---- the change itself: the new theme grows out of the switch (js/theme.js) ------------------ */
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }
html.vt-circle::view-transition-old(root) { animation: none; }
html.vt-circle::view-transition-new(root) { animation: nx-theme-in 0.72s cubic-bezier(0.55, 0, 0.2, 1) both; }
@keyframes nx-theme-in {
  from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 40px)); }
  to   { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 90%) var(--vt-y, 40px)); }
}