/* ============================================================
   Light variant — Remy-style warm paper, white cards, calm lines.
   Imports the full dark system, then overrides tokens + every
   hard-coded dark value. Same layout, same components.
   ============================================================ */

@import url("styles.css?v=13");

:root {
  --bg: #f7f5f0;
  --bg-raised: #ffffff;
  --bg-card: #ffffff;
  --ink: #201e1a;
  --ink-soft: #4b4942;
  --muted: #7b776c;
  --faint: #a8a396;
  --line: rgba(32, 30, 26, 0.09);
  --line-strong: rgba(32, 30, 26, 0.2);
  --accent: #b07a1a;
  --accent-soft: rgba(176, 122, 26, 0.1);
  --accent-line: rgba(176, 122, 26, 0.42);
  --ok: #257a3e;
}

/* ---------- chrome ---------- */

.site-header { background: rgba(247, 245, 240, 0.9); }

.btn-solid { background: var(--ink); color: #f7f5f0; }
.btn-solid:hover { background: #3a3730; }
.btn-accent { background: #dfa348; color: #241a08; }
.btn-accent:hover { background: #e7ad55; }

.map-toggle button[aria-pressed="true"] { background: var(--ink); color: #f7f5f0; }

/* ---------- hero / bands ---------- */

.hero::before { background: radial-gradient(closest-side, rgba(176, 122, 26, 0.08), transparent 70%); }
.cta-band::before { background: radial-gradient(closest-side, rgba(176, 122, 26, 0.09), transparent 70%); }

/* ---------- map ---------- */

.map-section { background: radial-gradient(1200px 600px at 50% 0%, #f0ede5, var(--bg) 70%); }

.map-frame {
  --land-dot: #d8d3c7;
  background: #fdfcf9;
}

.pin .core { fill: #c4881c; stroke: #fdfcf9; }
.pin .halo { fill: rgba(176, 122, 26, 0.16); }
.pin:hover .halo, .pin:focus-visible .halo { fill: rgba(176, 122, 26, 0.3); }
.pin:focus-visible .core { stroke: var(--ink); }
.pin.active .halo { fill: rgba(176, 122, 26, 0.34); }
.pin.home .ring { stroke: #c4881c; }
.leg-dot { background: #c4881c; box-shadow: 0 0 8px rgba(196, 136, 28, 0.6); }

.map-tip {
  background: #ffffff;
  border-color: var(--line-strong);
  box-shadow: 0 10px 30px rgba(46, 40, 28, 0.16);
}

.map-panel {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 50px rgba(46, 40, 28, 0.14);
}
@media (max-width: 800px) {
  .map-panel { box-shadow: 0 -14px 50px rgba(46, 40, 28, 0.2); }
}

/* ---------- cards & art ---------- */

/* posters keep their dark scrim + white type (art needs it) — only frames lighten */
.work-art { border-bottom-color: var(--line); background: linear-gradient(160deg, #edeae2, #f7f5f0); }
.work-art::before { filter: blur(26px) brightness(0.95) saturate(0.9) opacity(0.55); }
.work-art img { filter: drop-shadow(0 10px 24px rgba(46, 40, 28, 0.3)); }

.work-card:hover { border-color: var(--line-strong); }

.show-dialog::backdrop { background: rgba(48, 42, 30, 0.35); backdrop-filter: blur(4px); }

.headshot-ph { background: radial-gradient(100% 80% at 50% 0%, rgba(176, 122, 26, 0.05), transparent 60%), var(--bg-card); }

/* ---------- small print ---------- */

::selection { background: #e7ad55; color: #241a08; }