:root {
  /* Brand Palette */
  --navy:   #1D3557;
  --teal:   #2CB1A6;
  --amber:  #FFC857;
  --coral:  #FF7F61;
  --sky:    #A8DDF0;
  --cream:  #FFF6E6;

  /* Semantic aliases (used throughout the app) */
  --primary:        var(--teal);
  --primary-hover:  #249e94;
  --primary-active: #1d8c83;
  --accent:         var(--teal);
  --accent-text:    #1A8C82;
  --bg:             #FDFBF9;
  --bg-input:       #FEFEFE;
  --bg-callout:     #EEF3F4;
  --bg-card:        #FEFEFE;
  --text:           var(--navy);
  --text-light:     #5A7A9A;
  --text-muted:     #5A7A9A;
  --input-border:   #e2e8f0;
  --input-focus:    var(--teal);
  --badge-bg:       #E8F7F6;
  --badge-text:     var(--navy);
  --star:           var(--amber);
  --error:       var(--coral);
  --placeholder: var(--sky);
  --radius:         1.5rem; /* legacy card radius — referenced by .card-airy */
  --shadow-subtle:  0 1px 4px rgba(0, 0, 0, 0.08);
  --radius-sm:      10px;
  --radius-full:    9999px;
  --font-heading:   'Merriweather', serif;
  --font-body:      'Nunito', sans-serif;
}

* { font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-heading); letter-spacing: 0.02em; }

/* Primary Button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal);
  color: #ffffff;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { background: var(--primary-active); transform: scale(0.97); }
.btn-primary:disabled { background: #94a3b8; cursor: not-allowed; transform: none; }

/* Secondary Button (teal outline) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--teal);
  border: 2px solid var(--teal);
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}
.btn-secondary:hover:not(:disabled) { background: rgba(44, 177, 166, 0.08); transform: translateY(-1px); }
.btn-secondary:active:not(:disabled) { background: rgba(44, 177, 166, 0.16); transform: translateY(0); }
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Ghost Button (text only) */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--text-light);
  border: none;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: color 150ms ease;
}
.btn-ghost:hover:not(:disabled) { color: var(--navy); }
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

.card-airy {
  border-radius: 1.5rem;
  box-shadow: 0 4px 16px rgba(255, 200, 87, 0.15);
  border: none;
}

/* Filter chips — no border, 6px radius (less than pill height), dimension-specific colours */

.chip-active,
.chip-category {
  /* Category / active filter — teal tint */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  background: var(--badge-bg);   /* #E8F7F6 */
  color: var(--teal);
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  border: none;
}

.chip-inactive,
.chip-format {
  /* Format / unselected filter — neutral slate */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  background: #F1F5F9;
  color: var(--text-light);
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  border: none;
}

.chip-age {
  /* Age range — warm amber tint */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  background: #FFF6E6;
  color: #B87D00;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  border: none;
}

.chip-location {
  /* Location / neighbourhood — sky/callout tint */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  background: var(--bg-callout);  /* #EEF3F4 */
  color: var(--text-light);
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  border: none;
}

.chip-filter {
  /* Applied filter in Discover header — solid teal, white text */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  background: var(--teal);
  color: #ffffff;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  border: none;
}

/* Status Badges (registration workflow) */
.badge-considering {
  background: #F3F4F6;
  color: #6B7280;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 2px 10px;
}
.badge-registered {
  background: #E8F7F6;
  color: var(--teal);
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 2px 10px;
}
.badge-waitlisted {
  background: #FFF8E6;
  color: #B87D00;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 2px 10px;
}
.badge-paid {
  background: #E6F7EE;
  color: #1A8C4E;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 2px 10px;
}

/* iOS WebView defensive defaults */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
input, select, textarea {
  font-size: 16px; /* Prevents iOS zoom on focus */
}
* {
  -webkit-tap-highlight-color: transparent;
}
button, a, [data-action] {
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background-clip: padding-box;
}
button::selection, a::selection, [data-action]::selection {
  background: transparent;
}
/* Keep normal text selectable */
p, span, h1, h2, h3, h4, h5, h6, li, td, th, label, .selectable {
  user-select: text;
  -webkit-user-select: text;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Form Input Base */
.input-base {
  background: var(--bg-input);
  border: 1.5px solid var(--input-border);
  border-radius: 0.75rem;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  padding: 10px 14px;
  width: 100%;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}
.input-base:focus {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px rgba(44, 177, 166, 0.15);
}
.input-base::placeholder {
  color: var(--text-muted);
}
<<<<<<< HEAD

select.input-base {
  padding-top: 10px;
  padding-bottom: 10px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A7A9A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

textarea.input-base {
  border-radius: 0.5rem;
  resize: vertical;
}