/* =========================================================
   cityform — customer storefront
   Brand Design Guidelines v3.0 (April 2026)

   Brand Core only — Mist / Bone / Stone / Ink + Inter alone.
   Accent palette is referenced as CSS variables but ONLY
   applied inside City Mark compositions (the Sticker).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap');

/* ---------- Core palette (§3.1) ---------- */
:root {
  /* Brand Core — always present */
  --mist:   #E1E5E0;   /* primary background */
  --bone:   #F7F8F6;   /* cards, layered surfaces */
  --stone:  #6E7479;   /* secondary text, rules */
  --ink:    #1A1F26;   /* primary text, linework */

  /* Semantic aliases — used by components */
  --bg:           var(--mist);
  --surface:      var(--bone);
  --surface-2:    #ECEFEB;   /* slight tint between Mist and Bone */
  --line:         #C8CDC4;   /* Mist-toned rule */
  --line-strong:  #A6ACA3;
  --ink-soft:     #3A4049;
  --muted:        var(--stone);

  /* Accent palette (§3.2) — RESERVED for City Marks (§3.4 rule 04) */
  --vermilion: #D34833;
  --cobalt:    #2848C5;
  --saffron:   #E8AB30;
  --jade:      #2E7960;
  --aubergine: #59395F;
  --coral:     #ED7558;

  /* Active accent — set per city by JS where a City Mark renders */
  --accent: var(--ink);   /* default: Ink (NOT an accent). City Marks override locally. */

  /* Tracking constants (§4.2) — applied via the tracked-* utilities */
}

/* Dark inversion — Reversed wordmark surface (§2.3) */
[data-mode="dark"] {
  --bg:        var(--ink);
  --surface:   #21262E;
  --surface-2: #2A3038;
  --ink:       var(--mist);
  --ink-soft:  #C0C4BD;
  --muted:     #8B9099;
  --stone:     #8B9099;
  --line:      #2E343C;
  --line-strong: #3D4450;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font-family: inherit;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 0;
  letter-spacing: inherit;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- Typography (§4.2 hierarchy) ----------
   Tracking expressed as em (1/1000 em from the guide).
*/
.wordmark {
  font-family: 'Inter', sans-serif;
  font-variation-settings: 'opsz' 32;
  font-weight: 700;
  letter-spacing: -0.03em;     /* -3% */
  text-transform: lowercase;
  line-height: 1;
}
.h1 {
  font-family: 'Inter', sans-serif;
  font-variation-settings: 'opsz' 28;
  font-weight: 700;
  letter-spacing: -0.01em;     /* -1% */
  line-height: 1.05;
}
.h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: -0.005em;    /* -0.5% */
  line-height: 1.15;
}
.h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
}
.body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
}
.body-soft { color: var(--stone); }

.caption {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.18em;       /* +18% */
  color: var(--stone);
}
.label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;       /* +22% */
  color: var(--stone);
  text-transform: uppercase;
}

/* coordinate captions — Inter tabular, +18% tracking */
.coord {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--stone);
}

/* ---------- Atoms ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 0;            /* squared — contemporary, not soft */
}
.btn-primary {
  background: var(--ink);
  color: var(--mist);
}
.btn-primary:hover { background: #000; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-link {
  background: none;
  height: auto;
  padding: 0;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
}
.btn[disabled] { opacity: .4; cursor: default; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 14px;
  border-radius: 0;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip.active {
  background: var(--ink);
  color: var(--mist);
  border-color: var(--ink);
}

hr.rule, .rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
}

.stack > * + * { margin-top: var(--gap, 16px); }

/* ---------- Scrollbar (cool) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 0; }

/* ---------- Density ---------- */
[data-density="cozy"]     { --card-gap: 32px; --grid-min: 320px; }
[data-density="standard"] { --card-gap: 24px; --grid-min: 260px; }
[data-density="dense"]    { --card-gap: 14px; --grid-min: 200px; }

/* ---------- Animations ---------- */
@keyframes cf-spin { to { transform: rotate(360deg); } }
@keyframes cf-float {
  0%, 100% { transform: perspective(1100px) rotateX(38deg) rotateY(-12deg) translateY(0); }
  50%      { transform: perspective(1100px) rotateX(38deg) rotateY(-12deg) translateY(-6px); }
}
@keyframes cf-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Selection ---------- */
::selection { background: var(--ink); color: var(--mist); }