/* Sakigake theme tokens. Dark is the default; light is opt-in via the header toggle (theme.js).
   Tailwind colours ink / ash / bone / mute / white point at these variables (see each page's tailwind.config),
   so existing classes such as bg-ink, text-bone/50 and border-white/5 flip without markup changes.
   Values are space-separated RGB channels so Tailwind's opacity modifiers keep working. */
:root,
[data-theme="dark"] {
  --ink: 10 10 11;
  --ash: 22 22 24;
  --bone: 233 230 223;
  --mute: 138 138 134;
  --line: 255 255 255;   /* "white" in Tailwind classes: hairlines and grid gaps */
  --line-boost: 1;       /* multiplies hairline opacity: white/5 stays 5% in dark */
  --page: #0a0a0b;       /* the true page colour, used where photo overlays fade out */
  color-scheme: dark;
}
[data-theme="light"] {
  --ink: 245 242 236;    /* warm off-white page */
  --ash: 232 227 218;    /* light warm grey panels */
  --bone: 28 26 23;      /* near-black text */
  --mute: 110 106 99;
  --line: 0 0 0;         /* hairlines become black... */
  --line-boost: 1.6;     /* ...at ~8% where dark used white/5 */
  --page: #f5f2ec;
  color-scheme: light;
}
/* Areas that sit on photos keep the dark palette in both themes (hero, photo tour) */
[data-theme="light"] .theme-dark-scope {
  --ink: 10 10 11;
  --ash: 22 22 24;
  --bone: 233 230 223;
  --mute: 138 138 134;
  --line: 255 255 255;
  --line-boost: 1;
  color-scheme: dark;
  color: rgb(var(--bone));   /* text without its own colour class inherits the dark-palette colour */
}

/* First paint: correct colours before Tailwind's runtime has generated its classes */
html { background: var(--page); }
body { background: rgb(var(--ink)); color: rgb(var(--bone)); }

/* Section backgrounds */
[data-theme="light"] .plate:not(.theme-dark-scope) {
  background: radial-gradient(120% 140% at 50% 0%, rgba(255,255,255,.7), transparent 60%),
    linear-gradient(160deg, #fbf9f5 0%, #f5f2ec 55%, #eeeae2 100%);
}
[data-theme="light"] .plate-alt:not(.theme-dark-scope) { background: linear-gradient(200deg, #f0ece4 0%, #f5f2ec 60%); }
[data-theme="light"] .hairline { background: linear-gradient(90deg, transparent, rgba(0,0,0,.18), transparent); }

/* Shared UI pieces with fixed colours in the page styles */
html #navOverlay { background-color: rgb(var(--ink)); }
html select option { background: rgb(var(--ink)); color: rgb(var(--bone)); }
[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; opacity: .55; }
[data-theme="light"] .theme-dark-scope input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .5; }
[data-theme="light"] .date-wrap .date-ph { color: rgba(28,26,23,.4); }
[data-theme="light"] input[type="checkbox"], [data-theme="light"] input[type="radio"] { accent-color: #1c1a17; }
[data-theme="light"] .shimmer { background: linear-gradient(100deg, #e6e1d8 30%, #efebe4 50%, #e6e1d8 70%); background-size: 200% 100%; }
[data-theme="light"] .lc-card:focus-visible { outline-color: rgba(28,26,23,.6); }
[data-theme="light"] .g-thumb[aria-current="true"] { outline-color: rgba(28,26,23,.75); }

/* booking.html: total-price switch */
[data-theme="light"] .switch { background: rgba(0,0,0,.14); }
[data-theme="light"] .switch::after { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
[data-theme="light"] [aria-checked="true"] > .switch { background: rgba(28,26,23,.8); }
[data-theme="light"] [aria-checked="true"] > .switch::after { background: #fff; }

/* prive.html: benefit list rules */
[data-theme="light"] .perks li { border-bottom-color: rgba(0,0,0,.08); }
[data-theme="light"] .perks li::before { color: rgba(28,26,23,.35); }

/* property.html: map in light mode uses plain greyscale tiles and light controls */
[data-theme="light"] .dark-tiles { filter: grayscale(1) contrast(.95) brightness(1.02); }
[data-theme="light"] .leaflet-container { background: #e6e1d8; }
[data-theme="light"] .leaflet-bar a { background: #f5f2ec; color: #1c1a17; border-color: rgba(0,0,0,.15); }
[data-theme="light"] .leaflet-bar a:hover { background: #e6e1d8; color: #000; }
[data-theme="light"] .leaflet-control-attribution { background: rgba(245,242,236,.85) !important; color: rgba(28,26,23,.6) !important; }
[data-theme="light"] .leaflet-control-attribution a { color: rgba(28,26,23,.85) !important; }

/* Toggle button */
.theme-toggle svg { width: 18px; height: 18px; }

/* prive.html: the card render is a dark studio photo. Its soft edge fade only works on a dark page,
   so in light mode it is shown as a clean framed image instead. */
[data-theme="light"] .cards-figure { margin-left: auto; margin-right: auto; }
[data-theme="light"] .cards-figure img { -webkit-mask-image: none; mask-image: none; border: 1px solid rgba(0,0,0,.08); }

/* concierge.html: "photo to come" placeholder panels are an ash-to-black gradient; soften it in light mode */
[data-theme="light"] .bg-gradient-to-br.from-ash.to-black { background-image: linear-gradient(to bottom right, #e9e4db, #d8d1c5); }

/* Currency pill (currency.js): JPY | THB, next to the theme toggle */
.currency-toggle { border: 1px solid rgb(var(--line) / calc(.15 * var(--line-boost))); }
.currency-toggle [data-currency] { color: rgb(var(--bone) / .45); transition: color .2s ease; line-height: 1; }
.currency-toggle [data-currency]:hover { color: rgb(var(--bone) / .8); }
.currency-toggle [data-currency][aria-pressed="true"] { color: rgb(var(--bone)); }

/* ---- Heading typeface: TeX Gyre Heros Bold (free, GUST Font License; see /fonts/GUST-FONT-LICENSE-TeX-Gyre-Heros.txt) ----
   Every heading on the site uses the .font-serif class. This block points that class at TeX Gyre Heros instead of Fraunces.
   TO GO BACK TO THE SERIF HEADINGS: delete this whole block. Nothing else needs to change.
   TO SWAP IN A LICENSED FONT LATER (for example Helvetica Now): change the @font-face file and the first family name below. */
@font-face {
  font-family: "TeX Gyre Heros";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/texgyreheros-bold.woff2") format("woff2");
}
.font-serif {
  font-family: "TeX Gyre Heros", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
}