/* Design tokens (DESIGN.md §2). */
:root {
  --paper: #F4F0E6;
  --card: #FFFDF7;
  --ink: #1C1A15;
  --ink-2: #4A443A;
  --muted: #625B4E;
  --line: #E2DBCB;
  --line-soft: #EFE9DC;
  --line-strong: #CFC6B2;
  --sand: #E8E1D1;
  --dot-empty: #A79D88;
  --dash: #BDB4A1;
  --track: #D8D0BE;

  --yes: #15603E;
  --yes-deep: #0F4A2F;
  --yes-tint: #E6F2E8;
  --yes-halo: #DCEEDF;
  --yes-fill: #CFE5D4;
  --yes-line: #B9D6C3;

  --no: #B5461B;
  --no-text: #9A3A14;
  --no-deep: #7A2E0E;
  --no-tint: #FBEBDD;
  --no-fill: #F7E1D5;
  --no-line: #EBC4B0;
  --no-hatch: #E9A987;
  --ink-raised: #3A362E;

  --accent: #F2C14E;
  --accent-halo: #FBEFC9;
  --set-b: #2F55B8;
  --overlay: rgba(28, 26, 21, .6);

  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --shadow-bar: 0 8px 24px rgba(28, 26, 21, .18);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--ink); }
a:hover { color: var(--yes); }
svg { flex-shrink: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.disp { font-family: var(--font-display); }
.caps { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Single-column screens (Home, Join, New activity, …). */
.screen {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 12px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Sign-in and account screens: a 420 px column. */
.screen.narrow { max-width: 420px; }

.page-title {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
}

.section-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; }

/* Buttons */
.btn {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  color: var(--ink);
}
.btn:hover { color: inherit; }
.btn-lg { min-height: 56px; border-radius: 16px; font-size: 17px; width: 100%; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { color: var(--paper); }
.btn-save { background: var(--yes); color: var(--card); }
.btn-save:hover { color: var(--card); }
.btn-ink:disabled, .btn-save:disabled { background: var(--dot-empty); color: var(--card); }
.btn-outline { background: var(--card); border: 1px solid var(--line-strong); }
.btn-dashed {
  min-height: 52px;
  border-radius: 16px;
  border: 1.5px dashed var(--dash);
  background: transparent;
  width: 100%;
}
.btn-text { padding: 0 4px; font-weight: 400; color: var(--ink-2); }
.btn-text:hover { color: var(--ink); }
.btn-underline { text-decoration: underline; }

.icon-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  padding: 0;
}

/* Surfaces */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.list-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.list-card > * + * { border-top: 1px solid var(--line-soft); }

/* Inputs */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label { font-size: 15px; font-weight: 600; }
.input {
  min-height: 52px;
  width: 100%;
  padding: 0 16px;
  border-radius: 14px;
  border: 1.5px solid var(--line-strong);
  background: var(--card);
  font-size: 16px;
  color: var(--ink);
}
.input:focus { outline: none; border: 2px solid var(--ink); }

/* Toggle pills (duration presets, required people) */
.pill {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); }

.tag-required {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  letter-spacing: .02em;
  white-space: nowrap;
}