/* ============================================================
   VESTA — DARKROOM design tokens (live tracker)
   Warm espresso near-black · amber/ember light · serif × mono.

   The live design system. Replaced icarus-tokens.css. All component
   references use these clean token names directly — the legacy --ms-*
   shim layer was retired once components were migrated (Phase 2a).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Surfaces (warm espresso ramp) ---- */
  --bg-base:        #13100c;   /* page background */
  --bg-surface:     #1a1610;   /* secondary surfaces, top bar */
  --bg-card:        #211c14;   /* cards, inputs */
  --bg-card-hover:  #2a241b;   /* hover, status-pill bg */
  --bg-elevated:    #2f281d;   /* drawers, modals */
  --border:         #2f2820;
  --border-bright:  #473b2c;

  /* ---- Text (warm paper) ---- */
  --text-primary:   #f1e9dc;
  --text-secondary: #b3a48f;
  --text-muted:     #766654;

  /* ---- Rent / quality gradient (warm-shifted) ---- */
  --price-best:  #8fbf6b;   /* green       */
  --price-good:  #b9c46a;   /* olive       */
  --price-mid:   #e8a83c;   /* amber       */
  --price-high:  #d98a4a;   /* warm orange */
  --price-worst: #cf6a52;   /* terracotta  */

  /* ---- Accent (amber) + ember ---- */
  --accent:        #e8943c;
  --accent-bright: #f2b15e;
  --accent-soft:   rgba(232, 148, 60, 0.14);
  --on-accent:     #1a1208;   /* text on amber fills */
  --ember:         #cf6a52;
  --ember-soft:    rgba(207, 106, 82, 0.14);

  /* ---- Brand glyph (amber beveled diamond) ---- */
  --origin-color:  #e8943c;

  /* ---- Status series — DARKROOM warm spectrum ---- */
  --series-1: #8fbf6b;  /* green     */
  --series-2: #c9a15e;  /* brass     */
  --series-3: #e8a83c;  /* amber     */
  --series-4: #d98a4a;  /* orange    */
  --series-5: #b9c46a;  /* olive     */
  --series-6: #c78fb0;  /* mauve     */
  --series-7: #9bbf8f;  /* sage      */
  --series-8: #cf6a52;  /* terracotta*/
  --series-9: #d8c06a;  /* wheat     */

  /* ---- Map arcs (warm) ---- */
  --arc-default:  rgba(232, 148, 60, 0.45);
  --arc-hover:    rgba(242, 177, 94, 0.9);
  --arc-selected: rgba(143, 191, 107, 0.85);

  /* ---- Fonts ---- */
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Roboto Mono", monospace;

  /* ---- Type scale ---- */
  --fs-cover-title: 40px;
  --fs-h1:          24px;
  --fs-h2:          19px;
  --fs-h3:          16px;
  --fs-hero-stat:   38px;
  --fs-stat-label:  10px;
  --fs-body:        14px;
  --fs-table-cell:  12px;
  --fs-table-head:  10px;
  --fs-subtitle:    12px;

  /* ---- Radii (rectangular, contact-sheet) ---- */
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    10px;
  --radius-card:  6px;
  --radius-tile:  4px;
  --radius-input: 5px;
  --radius-pill:  14px;
  --radius-round: 999px;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ---- Shadows (warm-toned, low) ---- */
  --shadow-marker:     0 2px 8px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-popup:      0 12px 36px rgba(0, 0, 0, 0.62);
  --shadow-drawer:     -16px 0 40px rgba(0, 0, 0, 0.5);

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Page baseline */
  font-family: var(--font-body);
  color-scheme: dark;
}

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Tabular nums on prices/numerics everywhere */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-stat-label);
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--text-muted);
  font-weight: 500;
}

/* Serif italics are welcome again under DARKROOM (Spectral has a real italic) */
em, i, .editorial-quote { font-style: italic; }

/* Selection */
::selection { background: var(--accent-soft); color: var(--text-primary); }

/* Scrollbar (warm) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: var(--border-bright);
  border-radius: 99px;
  border: 3px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--border-bright) var(--bg-base); }

/* Wordmark — VESTA with rotated amber beveled diamond */
.vesta-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--text-primary);
  font-size: 16px;
  text-transform: uppercase;
}
.vesta-wordmark::before {
  content: '';
  display: inline-block;
  width: 9px; height: 9px;
  background: var(--accent);
  margin-right: 11px;
  transform: rotate(45deg) translateY(-1px);
  box-shadow: inset 0 0 0 1.5px rgba(26, 18, 8, 0.45),
              0 0 12px rgba(232, 148, 60, 0.45);
}
.vesta-wordmark.lg { font-size: 22px; }
.vesta-wordmark.lg::before {
  width: 12px; height: 12px; margin-right: 14px;
  box-shadow: inset 0 0 0 1.5px rgba(26, 18, 8, 0.45),
              0 0 16px rgba(232, 148, 60, 0.55);
}

/* Glyph alone */
.vesta-glyph {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--accent);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 1.5px rgba(26, 18, 8, 0.45),
              0 0 12px rgba(232, 148, 60, 0.45);
  flex: none;
}

/* Entrance animations never gate base visibility (opacity stays 1). */
@keyframes vesta-fade-up { from { transform: translateY(8px); } to { transform: translateY(0); } }
@keyframes vesta-fade    { from { transform: translateY(2px); } to { transform: translateY(0); } }
@keyframes vesta-drawer-in { from { transform: translateX(40px); } to { transform: translateX(0); } }

/* ============================================================
   Leaflet (OpenStreetMap) — DARKROOM theming
   Warm-filter the dark CARTO tiles toward espresso; restyle
   controls, attribution, and tooltips to match the system.
   ============================================================ */
.leaflet-container {
  background: var(--bg-base);
  font-family: var(--font-mono);
}
/* warm the neutral dark tiles toward espresso */
.vesta-map-tiles {
  filter: brightness(0.82) contrast(1.05) sepia(0.38) hue-rotate(-12deg) saturate(0.9);
}
.leaflet-bar, .leaflet-bar a {
  background: var(--bg-card);
  color: var(--text-primary);
  border-color: var(--border) !important;
}
.leaflet-bar a:hover { background: var(--bg-card-hover); }
.leaflet-control-attribution {
  background: rgba(19, 16, 12, 0.82) !important;
  color: var(--text-muted) !important;
}
.leaflet-control-attribution a { color: var(--text-secondary) !important; }
.leaflet-tooltip.vesta-tip {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-popup);
}
.leaflet-tooltip.vesta-tip::before { border-top-color: var(--border-bright); }

/* ============================================================
   MOTION PASS — interactive transitions + entrance (2026-05-31)
   Buttons are styled here (not inline) so :hover/:active win.
   All transform-only entrances honor "never gate visibility".
   ============================================================ */

/* ---- Btn ([data-kind]) — bg/color/border owned here so hover fires ---- */
button[data-kind] {
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
}
button[data-kind]:active { transform: translateY(1px); }

button[data-kind="primary"]   { background: var(--accent);        color: var(--on-accent);        border-color: var(--accent); }
button[data-kind="primary"]:hover   { background: var(--accent-bright); border-color: var(--accent-bright);
                                       box-shadow: 0 4px 16px rgba(232,148,60,0.28); }
button[data-kind="secondary"] { background: var(--bg-card);       color: var(--text-primary);     border-color: var(--border-bright); }
button[data-kind="secondary"]:hover { background: var(--bg-card-hover); border-color: var(--accent); }
button[data-kind="ghost"]     { background: transparent;          color: var(--text-secondary);   border-color: transparent; }
button[data-kind="ghost"]:hover     { background: var(--bg-card); color: var(--text-primary); }
button[data-kind="danger"]    { background: transparent;          color: var(--price-worst);      border-color: var(--border-bright); }
button[data-kind="danger"]:hover    { background: var(--bg-card); border-color: var(--price-worst); }
button[data-kind="dark"]      { background: var(--bg-card-hover); color: var(--text-primary);     border-color: var(--border-bright); }
button[data-kind="dark"]:hover      { border-color: var(--accent); }

/* ---- Nav links — color + animated underline ---- */
.vesta-nav-link {
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.vesta-nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  background: var(--accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-base) var(--ease);
}
.vesta-nav-link:hover { color: var(--text-primary); }
.vesta-nav-link:hover::after { transform: scaleX(0.55); }
.vesta-nav-link.active::after { transform: scaleX(1); }

/* ---- SegToggle pills (mono buttons inside .seg) ---- */
.seg button { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }

/* ---- Card hover lift (apartment cards opt in via .vesta-card) ----
   Owns background so the hover lighten fires via CSS; the status-colored
   left border stays inline (dynamic per card) and is intentionally not
   touched here. */
.vesta-card {
  background: var(--bg-card);
  transition: transform var(--dur-base) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease);
  will-change: transform;
}
.vesta-card:hover {
  transform: translateY(-3px);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-card-hover);
}

/* ---- Top-bar TRACK CTA (inline-styled; bg owned here so hover fires) ---- */
.vesta-cta {
  background: var(--accent);
  transition: background var(--dur-fast) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.vesta-cta:hover { background: var(--accent-bright); box-shadow: 0 4px 16px rgba(232,148,60,0.30); }
.vesta-cta:active { transform: translateY(1px); }

/* ---- Filter chips (dynamic inline bg/border; animate filter+lift only) ---- */
.vesta-chip {
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.vesta-chip:hover { filter: brightness(1.18); transform: translateY(-1px); }
.vesta-chip:active { transform: none; }

/* ---- View entrance — each view mounts fresh on switch; transform-only ---- */
.view-enter { animation: vesta-fade-up var(--dur-slow) var(--ease) both; }
.list-stagger > * { animation: vesta-fade-up var(--dur-base) var(--ease) both; }

/* ---- Modal / drawer entrance ---- */
@keyframes vesta-scale-in { from { transform: scale(0.97); } to { transform: scale(1); } }
@keyframes vesta-backdrop { from { opacity: 0; } to { opacity: 1; } }
.vesta-backdrop { animation: vesta-backdrop var(--dur-base) var(--ease) both; }
.vesta-drawer   { animation: vesta-drawer-in var(--dur-slow) var(--ease) both; }
.vesta-modal    { animation: vesta-scale-in var(--dur-base) var(--ease) both; }

/* ---- Respect reduced-motion globally for this pass ---- */
@media (prefers-reduced-motion: reduce) {
  .view-enter, .list-stagger > *, .vesta-backdrop, .vesta-drawer, .vesta-modal { animation: none; }
  .vesta-card { transition: border-color var(--dur-fast) var(--ease); }
  .vesta-card:hover { transform: none; }
  .vesta-nav-link::after { transition: none; }
  .vesta-cta:active, .vesta-chip:hover { transform: none; }
}