/* === BUTTONS === */

:root {
  --btn-primary-bg: #c9a227;
  --btn-primary-bg-hover: #d4af37;
  --btn-primary-bg-active: #b89220;
  --btn-primary-text: #000;

  /* Button sizing tokens */
  --btn-height: 2.75rem;
  --btn-height-lg: 3.5rem;
  --btn-padding: 1.5rem;
  --btn-padding-lg: 2rem;
  --btn-font: 0.875rem;
  --btn-font-lg: 1rem;
  --btn-radius: 999px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--btn-height);
  padding: 0 var(--btn-padding);
  font-family: inherit;
  font-size: var(--btn-font);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border-radius: var(--btn-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.btn:focus {
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Primary Button (Orange/Gold) */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-bg);
  box-shadow: 0 4px 15px rgba(201, 162, 39, 0.3);
}

.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.4);
  transform: translateY(-2px);
}

.btn-primary:active {
  background: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
  box-shadow: 0 2px 10px rgba(201, 162, 39, 0.3);
  transform: translateY(0);
}

/* Outline Button */
.btn-outline {
  background: transparent;
  color: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
}

.btn-outline:hover {
  background: var(--btn-primary-bg);
  color: #000;
  border-color: var(--btn-primary-bg);
  transform: translateY(-2px);
}

.btn-outline:active {
  background: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
  transform: translateY(0);
}

/* Small Button */
.btn-sm {
  min-height: 2.25rem;
  padding: 0 1rem;
  font-size: 0.75rem;
}

/* Large Button */
.btn-lg {
  min-height: var(--btn-height-lg);
  padding: 0 var(--btn-padding-lg);
  font-size: var(--btn-font-lg);
}