/* Search Party base. Every page loads this first, then its own stylesheet (styles.css for the landing, app/app.css for the app).
   Tokens live here and nowhere else. The guide is docs/style-guide.md. */

:root {
  /* Colour */
  --ground: #f7f6f3;
  --block: #edebe6;
  --rule: #dedbd4;
  --ink: #141311;
  --ink-2: rgba(20, 19, 17, 0.68);
  --ink-3: rgba(20, 19, 17, 0.44);
  --accent: #e8451c;
  --accent-hover: #d23d17;
  --accent-ink: #ffffff;
  --tint: rgba(20, 19, 17, 0.035);
  --overlay: rgba(20, 19, 17, 0.32);
  --ring: rgba(255, 255, 255, 0.6);
  /* Pastel palette: tags, Inbox verb pills, dots. Read through --tc (see app.css). */
  --c1: #d5e3cc;
  --c2: #d1dfec;
  --c3: #ece0b4;
  --c4: #e8d4e4;
  --c5: #f1d9c6;
  --c6: #dad7ec;
  --c7: #cde4de;
  --c8: #e6dccb;
  /* Type */
  --font: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* App type scale. The landing has its own clamp scale in styles.css. */
  --fs-count: 9px;
  --fs-pill: 11px;
  --fs-meta: 12px;
  --fs-ctl: 13px;
  --fs-row: 14px;
  --fs-base: 15px;
  --fs-cardtitle: 16px;
  --fs-lg: 17px;
  --fs-sec: 19px;
  --fs-title: 22px;
  /* Layout */
  --gutter: clamp(20px, 5vw, 64px);
  /* Radius: controls 6, surfaces 8, pills and avatars 999 */
  --r-ctl: 6px;
  --r-card: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  padding-inline: var(--gutter);
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--ink-2); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }