/* Portfolio skin for the Zameen price map (loaded after map.css; copied by build_projects.py).
   Same fonts and purple palette as the rest of the site. map.html sets data-theme from the
   site's saved theme, and the project page keeps it in sync when the toggle is used. */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(../../fonts/hanken-grotesk-latin.woff2) format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../../fonts/space-mono-latin.woff2) format('woff2'); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-0: #050505;
  --surface-1: #0d0a12;
  --surface-2: #16121e;
  --border: rgba(255, 255, 255, .12);
  --text-primary: #f0f0f0;
  --text-secondary: rgba(240, 240, 240, .68);
  --text-muted: rgba(240, 240, 240, .5);
  --accent: hsl(258 90% 77%);
  --seg-on: hsl(258 90% 60%);
  --seg-on-text: #fff;
  --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 18px 48px rgb(0 0 0 / .55);
  --radius: 16px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --surface-0: #faf9fc;
  --surface-1: #ffffff;
  --surface-2: #f1edf9;
  --border: rgba(23, 19, 31, .12);
  --text-primary: #17131f;
  --text-secondary: rgba(23, 19, 31, .68);
  --text-muted: rgba(23, 19, 31, .5);
  --accent: oklch(46% .2 293);
  --seg-on: oklch(46% .2 293);
  --seg-on-text: #fff;
  --shadow: 0 1px 2px rgb(23 19 31 / .06), 0 18px 48px rgb(23 19 31 / .12);
  --radius: 16px;
}
:root { font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; }

.panel { border: 1px solid var(--border); background: linear-gradient(160deg, hsl(258 90% 66% / .07), transparent 70%), var(--surface-1); }
.eyebrow, .control-label, .seg button, .small-select, .legend-labels, .list-head h2, .city-select + *, .area-list .n {
  font-family: 'Space Mono', ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; font-weight: 400;
}
.eyebrow, .control-label { font-size: 10.5px; }
.seg { border-radius: 999px; }
.seg button { border-radius: 999px; font-size: 10.5px; }
.city-select, .hero { font-weight: 500; letter-spacing: -.02em; }
.panel-foot a { color: var(--accent); }
.leaflet-container { font-family: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif; }