/* uwhere shared theme tokens — calm, grown-up, warm. Photos + map carry the personality; chrome stays quiet.
   AVATAR_EMOJI  = ["🦊","🐻","🐼","🐸","🦉","🐙","🦄","🐝","🐢","🦦","🐧","🦔","🐳","🦩","🐞","🌵","🍄","🌻","🍋","🍉","🚀","🎈","⭐","🌙"]
   AVATAR_COLORS = ["#C8553D","#D9A441","#5B8C6A","#3F7CAC","#7A6BA8","#B5677D","#3E8E88","#8A6E4B"]   (muted)
   PIN_EMOJI     = ["🍽️","🏨","☕","🍻","🏖️","🎉","🚌","⛰️","🏛️","🛶","🎤","🧘","📍","⭐"] */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700&family=Inter:opsz,wght@14..32,400..700&display=swap");

:root {
  --paper: #f6f5f2;          /* app background */
  --paper-2: #eeece7;        /* subtle fills, chips, input bg */
  --card: #ffffff;
  --ink: #18181b;            /* text + primary buttons */
  --ink-2: #52525b;
  --ink-3: #a1a1aa;
  --line: rgba(24, 24, 27, .09);

  /* legacy names kept so existing CSS keeps working — all toned down, use sparingly */
  --coral: #e2583e;          /* THE accent: me, live, primary highlights */
  --sun: #d9a441;
  --mint: #2f9e6e;           /* live / connected */
  --sky: #3f7cac;
  --lilac: #7a6ba8;

  --accent: var(--coral);
  --accent-ink: #fff;

  --radius-s: 10px;
  --radius: 14px;
  --radius-l: 20px;
  --shadow: 0 1px 2px rgba(24, 24, 27, .06), 0 8px 24px -8px rgba(24, 24, 27, .16);
  --shadow-chunky: 0 1px 2px rgba(24, 24, 27, .08);   /* no more offset "sticker" shadows */
  --border: 1px solid var(--line);

  --font-display: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;

  --spring: cubic-bezier(.2, .8, .2, 1);              /* smooth ease-out, no overshoot */
  --map-filter: saturate(.7) contrast(.96) brightness(1.03);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #111113;
    --paper-2: #1c1c1f;
    --card: #19191c;
    --ink: #f4f4f5;
    --ink-2: #a1a1aa;
    --ink-3: #6b6b74;
    --line: rgba(255, 255, 255, .09);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .6);
    --shadow-chunky: 0 1px 2px rgba(0, 0, 0, .4);
    --border: 1px solid var(--line);
    --map-filter: saturate(.55) brightness(.9) contrast(1.02);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
.leaflet-tile-pane { filter: var(--map-filter); }