.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font: 600 var(--text-base) var(--font-heading);
  cursor: pointer;
  text-decoration: none;
}
.ui-btn:hover { text-decoration: none; }

.ui-btn-primary { background: var(--primary); color: #fff; }
.ui-btn-primary:hover { background: var(--primary-hover); color: #fff; }

.ui-btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(14, 42, 82, 0.2);
}
.ui-btn-secondary:hover { background: #fff; color: var(--ink); }

.ui-btn-gold { background: var(--gold); color: var(--navy); }
.ui-btn-gold:hover { background: var(--gold2); color: var(--navy); }

.ui-btn-ghost-light {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.ui-btn-ghost-light:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* Overrides every variant above regardless of which one's applied (a class
   selector + :disabled outranks a single class on specificity), and
   pointer-events:none stops :hover rules from ever matching a disabled
   button. Note <a> can't be disabled at all — this is why every "coming
   soon" link on the site is a real <button disabled>, not an anchor. */
.ui-btn:disabled {
  background: var(--disabled);
  color: var(--disabled-text);
  border-color: transparent;
  cursor: not-allowed;
  pointer-events: none;
}

.ui-eyebrow {
  display: inline-block;
  font: 600 var(--text-xs) var(--font-heading);
  letter-spacing: var(--tracking-eyebrow-wide);
  text-transform: uppercase;
  color: var(--green);
  display: none;
}

.ui-card {
  background: #fff;
  border: 1px solid rgba(14, 42, 82, 0.10);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.ui-badge {
  display: inline-flex;
  align-items: center;
  font: 600 var(--text-xs) var(--font-body);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--chip);
  color: var(--pending-text);
}

/* "Under discussion / under development" — reused on Prizes and Contact/FAQ. */
.ui-badge-warning { background: oklch(0.93 0.05 75); color: #6B4E12; }

.ui-placeholder-image {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px dashed rgba(14, 42, 82, 0.25);
  background: repeating-linear-gradient(-45deg, rgba(14, 42, 82, 0.05) 0 10px, transparent 10px 20px);
  color: var(--muted);
  font: italic 400 var(--text-sm) var(--font-body);
  line-height: 1.7;
}