/* ========== Dark mode scaffold ==========
   Activated by setting html[data-theme="dark"]. The defaults on :root
   (styles.css) remain the light theme. Dark mode is a v1 scaffold:
   colors are tuned for readability but fine tuning against real photos
   and photography-heavy pages will come later.
*/

:root[data-theme="dark"] {
  /* Core palette — inverted from bone on ink to ink on bone */
  --ink: #F4EFE6;        /* text color */
  --bone: #1D1D1D;       /* page background — matches the brand-dark SVGs so the logo blends seamlessly */
  --terracotta: #C97A4A; /* slightly brighter so it pops on dark */
  --cypress: #7AA88E;    /* brighter green so hairlines still read */
  --linen: #2A2A2A;      /* the tone used for subtle chips/cards */
  --rule: #333131;       /* dividers */
  --muted: #A8A8A8;      /* secondary text */
}

/* Any element that hardcodes white/#fff needs an override. Search
   revealed none in styles.css, but dashboard.css and admin pages do
   so we add a layer of defense here: anything that relied on "fff"
   to mean "card surface" reads --card instead. If we find more, we
   map them here without touching the original CSS. */
:root[data-theme="dark"] .gate,
:root[data-theme="dark"] .booking,
:root[data-theme="dark"] .roster-card,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .dash-filters .chip,
:root[data-theme="dark"] .booking-assign select,
:root[data-theme="dark"] .gate input {
  background: #1E1E1E;
  border-color: var(--rule);
  color: var(--ink);
}

:root[data-theme="dark"] .dash-nav {
  background: #0E0E0E;
  border-bottom-color: var(--rule);
}

:root[data-theme="dark"] .nav {
  background: var(--bone);
}

:root[data-theme="dark"] .toast {
  background: #2A2A2A;
  color: var(--ink);
}

/* Soft shadows read heavy on dark backgrounds; turn them down */
:root[data-theme="dark"] .toast {
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

/* Images and portraits: subtle dim so dark mode at night is not
   blasted out by high key photography. */
:root[data-theme="dark"] .hero img,
:root[data-theme="dark"] .gallery img,
:root[data-theme="dark"] img:not(.roster-avatar):not(.logo) {
  filter: brightness(0.9);
}

/* Form inputs on light backgrounds */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="date"],
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: #1E1E1E;
  color: var(--ink);
  border-color: var(--rule);
}
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
}

/* ---------- Formerly dark surfaces become terracotta in dark mode ----------
   Per brand direction: anything that was a solid ink-dark surface on the
   light theme (primary CTAs, book button, promo blocks) gets the
   terracotta treatment in dark mode so it still reads as the call to
   action rather than blending into the flat light-on-dark look. */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .gate button,
:root[data-theme="dark"] .nav-links .book-btn,
:root[data-theme="dark"] .book-btn,
:root[data-theme="dark"] .skip-link {
  background: var(--terracotta);
  color: var(--bone);
  border-color: var(--terracotta);
}
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] .btn--primary:hover,
:root[data-theme="dark"] .nav-links .book-btn:hover,
:root[data-theme="dark"] .book-btn:hover {
  background: #E08A55; /* lifted terracotta */
  color: var(--bone);
}

/* Secondary / outlined buttons keep the ghost look but with the dark palette */
:root[data-theme="dark"] .btn:not(.btn--primary):not(.book-btn):not(.banner .btn) {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--rule);
}
:root[data-theme="dark"] .btn:not(.btn--primary):not(.book-btn):not(.banner .btn):hover {
  background: var(--linen);
  color: var(--ink);
  border-color: var(--ink);
}

/* Banner CTA ("Ready to sit for a session?") — terracotta by default in
   dark mode so it doesn't blend into the dark banner background. Flips to
   ink on hover to keep the call-to-action tension. */
:root[data-theme="dark"] .banner .btn {
  background: var(--terracotta);
  color: var(--bone);
  border-color: var(--terracotta);
}
:root[data-theme="dark"] .banner .btn:hover {
  background: #1D1D1D;
  color: var(--bone);
  border-color: #1D1D1D;
}

/* ---------- Brand logo adaptation ----------
   The footer endorsement SVG hardcodes #1D1D1D (ink), #A8572C (terracotta),
   #6B6B6B (muted), and #D3D1C7 (hairline) as inline presentation attributes.
   CSS beats those attributes, so we retint them in dark mode without touching
   the markup in every HTML file.

   The nav lockup has been migrated to external SVG files (lockup-light.svg and
   lockup-dark.svg) with an img-based light/dark swap in styles.css, so it no
   longer needs retinting rules here. */

/* Footer endorsement lockup migrated to external SVG files with img-based
   light/dark swap in styles.css. No retint rules needed here. */

/* Favicon and small inline SVGs elsewhere that use #1D1D1D as the ink
   color can be targeted the same way if they surface later. */
:root[data-theme="dark"] svg text[fill="#1D1D1D"] { fill: var(--ink); }
:root[data-theme="dark"] svg tspan[fill="#1D1D1D"] { fill: var(--ink); }
:root[data-theme="dark"] svg g[stroke="#1D1D1D"] { stroke: var(--ink); }
:root[data-theme="dark"] svg path[stroke="#1D1D1D"] { stroke: var(--ink); }

/* ---------- Admin hardcoded light surfaces ----------
   Dashboard CSS uses literal #fff, #fffbf4, #fbf4ea, #f0ebe2, #f7f2e8,
   #f3efe6, #fdf6ef, #f5ead8 in many places. In dark mode those read as
   bright cream boxes clashing with the dark layout. Flip them all to
   dark surface tones with terracotta accents per brand guidelines. */

/* Dash body — single source of truth. Dashboard.css now uses var(--bone)
   which flips correctly, but we leave this rule as a safety net in case
   any child section reintroduces a hardcoded cream. */
:root[data-theme="dark"] .dash-body {
  background: var(--bone);
  color: var(--ink);
}

/* Stat cards, bookings, roster, discount tables, forms — all inherit
   the dark surface treatment. Card surface is slightly lifted off the
   page bg so elements read distinctly. */
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .booking,
:root[data-theme="dark"] .roster-card,
:root[data-theme="dark"] .tax-deadline,
:root[data-theme="dark"] .tax-breakdown,
:root[data-theme="dark"] .discount-table,
:root[data-theme="dark"] .discount-table td,
:root[data-theme="dark"] .discount-table th,
:root[data-theme="dark"] .booking-assign select,
:root[data-theme="dark"] .assign-select,
:root[data-theme="dark"] .gate,
:root[data-theme="dark"] .dash-filters .chip,
:root[data-theme="dark"] .invite-row,
:root[data-theme="dark"] .invites-table,
:root[data-theme="dark"] .invites-table td,
:root[data-theme="dark"] .invites-table th {
  background: #1E1E1E;
  color: var(--ink);
  border-color: var(--rule);
}

/* Hover states: lift slightly and pick up terracotta outline */
:root[data-theme="dark"] .roster-card:hover,
:root[data-theme="dark"] .booking:hover {
  background: #252525;
  border-color: var(--terracotta);
}

/* Calendar swatches, week grid, month grid — replace all the beige
   hardcodes with dark surface tones. The terracotta/cypress accent
   colors (used as borders) stay since they're already brand tokens. */
:root[data-theme="dark"] .swatch,
:root[data-theme="dark"] .swatch--session,
:root[data-theme="dark"] .swatch--hold,
:root[data-theme="dark"] .swatch--closed {
  background: #1E1E1E;
  color: var(--ink);
}
:root[data-theme="dark"] .swatch--closed {
  border-color: var(--rule);
}

:root[data-theme="dark"] .week-col,
:root[data-theme="dark"] .month-cell {
  background: var(--bone);
  color: var(--ink);
  border-color: var(--rule);
}
:root[data-theme="dark"] .week-col--off,
:root[data-theme="dark"] .month-cell--off {
  background: #0E0E0E;
}
:root[data-theme="dark"] .month-cell--other {
  background: #1D1D1D;
  color: var(--muted);
}
:root[data-theme="dark"] .week-event,
:root[data-theme="dark"] .month-event {
  background: #2A1F18;
  color: var(--ink);
  border-left-color: var(--terracotta);
}
:root[data-theme="dark"] .month-event:hover,
:root[data-theme="dark"] .week-event:hover {
  background: #3A2820;
}
/* Studio-blocked / external event text — force light in dark mode. The base
   light-mode rule paints this slate-blue (#2F4256 / #2f4a64), which is
   unreadable on the dark calendar. This lives here (the authoritative dark
   stylesheet, loaded last) with !important so it wins regardless of the
   per-calendar inline band colours. Covers month, week-grid and day views. */
:root[data-theme="dark"] .month-event.event--external .ev-time,
:root[data-theme="dark"] .month-event.event--external .ev-name,
:root[data-theme="dark"] .week-tg-extband .extband-time,
:root[data-theme="dark"] .week-tg-extband .extband-name,
:root[data-theme="dark"] .week-tg-extall,
:root[data-theme="dark"] .day-extchip,
:root[data-theme="dark"] .month-ext-more,
:root[data-theme="dark"] .week-slot--external .slot-time,
:root[data-theme="dark"] .week-slot--external .slot-name {
  color: var(--ink) !important;
}
:root[data-theme="dark"] .assign-select--empty {
  background: #2A1F18;
  color: var(--terracotta);
  border-color: var(--terracotta);
}

/* Pill tags in dark mode: keep terracotta/ink, but soften the beige
   variants that would otherwise wash out. */
:root[data-theme="dark"] .pill--portrait {
  background: #3A2F20;
  color: #E8D9BF;
}
:root[data-theme="dark"] .pill--feature {
  background: #2F2A20;
  color: #D9D0BC;
}

/* Active photographer / stat dark cards that are ALREADY dark on light
   theme (like the "Upcoming this week" and "Revenue booked" tiles) should
   keep their dark look in dark mode too, but lifted slightly so they
   read as cards rather than body. */
:root[data-theme="dark"] .stat[style*="background"],
:root[data-theme="dark"] .stat--dark {
  background: #252525 !important;
  color: var(--ink);
}

/* Dashed-outline empty states ("No bookings match this filter" and the
   roster empty) — switch dash color and text so they read on dark. */
:root[data-theme="dark"] .empty-state {
  color: var(--muted);
  border-color: var(--rule);
}

/* Table rows: striping and hover */
:root[data-theme="dark"] .invites-table tr:hover,
:root[data-theme="dark"] .discount-table tbody tr:hover {
  background: #252525;
}

/* Text emphasis: labels, hint notes, and section headers get the
   lightened muted token so they read well on the dark body. */
:root[data-theme="dark"] .dash-greeting h1,
:root[data-theme="dark"] .dash-section-head h2,
:root[data-theme="dark"] .stat-val,
:root[data-theme="dark"] .tax-row,
:root[data-theme="dark"] .tax-deadline-val,
:root[data-theme="dark"] .booking-client-name,
:root[data-theme="dark"] .roster-card h3 {
  color: var(--ink);
}
:root[data-theme="dark"] .dash-section-head h2 em,
:root[data-theme="dark"] .dash-greeting h1 em,
:root[data-theme="dark"] .tax-row--total .tax-row-v {
  color: var(--terracotta);
}

/* Tax widget breakdown values */
:root[data-theme="dark"] .tax-row--total {
  border-top-color: var(--terracotta);
}

/* Section head controls (ALL / UNASSIGNED / THIS WEEK / EXPORT CSV
   buttons) — the "active" pill was hardcoded dark on cream. In dark
   mode flip to terracotta pill so it still reads as active. */
:root[data-theme="dark"] .chip.is-active {
  background: var(--terracotta);
  color: var(--bone);
  border-color: var(--terracotta);
}
:root[data-theme="dark"] .chip:not(.is-active) {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
}
:root[data-theme="dark"] .chip:not(.is-active):hover {
  border-color: var(--terracotta);
  color: var(--terracotta);
}

/* ---------- Public site: ensure every section inherits the dark page
   background. `.section` classes don't set background; they show the body
   color through. Any section that explicitly uses a light token
   automatically flips via variable inversion. This block catches edge
   cases where footer or strip galleries need a darker plate. */
:root[data-theme="dark"] footer {
  background: var(--bone);
  border-top-color: var(--rule);
}
:root[data-theme="dark"] .footer-inner,
:root[data-theme="dark"] .footer-bottom {
  color: var(--ink);
}

/* Accent text emphasis — italic "club." style <em> used across headings */
:root[data-theme="dark"] em,
:root[data-theme="dark"] .accent,
:root[data-theme="dark"] .detail-price .cur {
  color: var(--terracotta);
}

/* Radio / checkbox borders and chip backgrounds read faintly in the
   scaffold; bump contrast on swatches and option tiles. */
:root[data-theme="dark"] .swatch .chip,
:root[data-theme="dark"] .prop-inner,
:root[data-theme="dark"] .addon {
  background: #1E1E1E;
  border-color: var(--rule);
}
:root[data-theme="dark"] label.prop input:checked ~ .prop-inner,
:root[data-theme="dark"] .addon input:checked ~ .addon-main {
  border-color: var(--terracotta);
}

/* Live preview iframe in the site editor shares the page background */
:root[data-theme="dark"] iframe.preview-frame {
  background: var(--bone);
}

/* Theme toggle pill */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 6px 10px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink);
  line-height: 1;
}
.theme-toggle:hover { background: var(--linen); }
.theme-toggle .theme-toggle-icon { display: inline-block; margin-right: 6px; }

/* SC4 — in dark mode the nav theme-toggle's circular border was using --rule
   (#333131) which is nearly invisible on a dark background. Give it a
   brighter border so the sun/moon button outline reads, and a subtle
   terracotta hover so the affordance is clear. */
:root[data-theme="dark"] .nav-links .theme-toggle--nav {
  border-color: rgba(244, 239, 230, 0.32);
}
:root[data-theme="dark"] .nav-links .theme-toggle--nav:hover {
  border-color: var(--terracotta);
}
:root[data-theme="dark"] .theme-toggle--floating {
  border-color: rgba(244, 239, 230, 0.32);
}
:root[data-theme="dark"] .theme-toggle--floating:hover {
  border-color: var(--terracotta);
}