/* components.css
   SPKTKL Arena UI — Core Components (buttons, pills, cards, inputs)
*/

a {
  color: inherit;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: var(--fs-2);
  border-radius: var(--radius-2);
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  line-height: 1;
}

.btn-primary {
  background: var(--spktkl-gold);
  color: #141414;
  border: 0;
}

.btn-secondary {
  background: rgba(255,255,255,0.06);
  color: var(--text-1);
  border: 1px solid var(--border-subtle);
}

.btn-ghost {
  background: transparent;
  color: var(--text-1);
  border: 1px solid transparent;
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,184,0,0.28);
}

/* Pills / Tags */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  font-size: var(--fs-1);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.06);
  color: var(--text-2);
  letter-spacing: 0.02em;
}

/* Cards */
.card {
  border-radius: var(--radius-3);
  border: 1px solid var(--border-subtle);
  background: rgba(255,255,255,0.04);
  padding: var(--space-4);
}

/* Inputs */
.input {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--fs-2);
  border-radius: var(--radius-2);
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.04);
  color: var(--text-1);
}

.input::placeholder {
  color: var(--text-3);
}

.input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(230,184,0,0.18);
  border-color: rgba(230,184,0,0.45);
}

/* Typography helpers */
.h1 { font-size: var(--fs-5); color: var(--text-1); }
.h2 { font-size: var(--fs-4); color: var(--text-1); }
.body { font-size: var(--fs-3); color: var(--text-1); }
.meta { font-size: var(--fs-1); color: var(--text-3); }

/* Utility */
.muted { color: var(--text-2); }