/* Buttons — primary crimson CTA, neutral on-felt button, ghost link.
   Tokens only. */

.cf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cf-space-2);
  padding: 10px 16px;
  border-radius: var(--cf-radius-md);
  border: 1px solid transparent;
  font: var(--cf-fw-bold) var(--cf-fs-14) / 1 var(--cf-font-sans);
  letter-spacing: var(--cf-tracking-wide);
  cursor: pointer;
  user-select: none;
  transition: background var(--cf-dur-fast) var(--cf-ease),
              transform var(--cf-dur-fast) var(--cf-ease),
              box-shadow var(--cf-dur-fast) var(--cf-ease);
  color: var(--cf-fg-on-felt);
}

.cf-btn:focus-visible {
  outline: 2px solid var(--cf-gold-300);
  outline-offset: 2px;
}

.cf-btn:disabled,
.cf-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* Primary — deep crimson, the chip-like main CTA on the felt */
.cf-btn--primary {
  background: var(--cf-primary);
  color: var(--cf-primary-fg);
  border-color: rgba(0, 0, 0, 0.35);
  box-shadow: 0 3px 0 var(--cf-primary-press),
              0 8px 18px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.cf-btn--primary:hover { background: var(--cf-primary-hover); }
.cf-btn--primary:active {
  background: var(--cf-primary-press);
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--cf-primary-press),
              0 4px 10px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Neutral — sits on the felt, matches the panel ink */
.cf-btn--neutral {
  background: rgba(0, 0, 0, 0.25);
  color: var(--cf-fg-on-felt);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--cf-shadow-felt-sm),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.cf-btn--neutral:hover { background: rgba(0, 0, 0, 0.38); }
.cf-btn--neutral:active { transform: translateY(1px); }

/* Ghost — link-shaped, no chrome until hover */
.cf-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--cf-fg-on-felt-muted);
}
.cf-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--cf-fg-on-felt);
}

/* Gold — for the celebrated path: a Yahtzee, a win declared */
.cf-btn--gold {
  background: linear-gradient(180deg, var(--cf-gold-300), var(--cf-gold-500));
  color: var(--cf-felt-900);
  border-color: var(--cf-gold-700);
  box-shadow: 0 3px 0 var(--cf-gold-700),
              0 8px 18px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.cf-btn--gold:hover { filter: brightness(1.04); }
.cf-btn--gold:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cf-gold-700); }

/* Sizes */
.cf-btn--sm { padding: 6px 10px; font-size: var(--cf-fs-13); border-radius: var(--cf-radius-sm); }
.cf-btn--lg { padding: 14px 22px; font-size: var(--cf-fs-16); }

/* Icon-only square */
.cf-btn--icon { padding: 10px; width: 40px; height: 40px; }
.cf-btn--icon.cf-btn--sm { width: 32px; height: 32px; padding: 6px; }

/* Select — same chrome as neutral button, with native arrow hidden */
.cf-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 10px 36px 10px 14px;
  line-height: 1.4;
  border-radius: var(--cf-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background-color: rgba(0, 0, 0, 0.25);
  color: var(--cf-fg-on-felt);
  font: var(--cf-fw-bold) var(--cf-fs-14) / 1.4 var(--cf-font-sans);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23c6d3e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.cf-select:hover { background-color: rgba(0, 0, 0, 0.38); }
.cf-select:focus-visible { outline: 2px solid var(--cf-gold-300); outline-offset: 2px; }

.cf-on-paper .cf-select {
  background-color: var(--cf-paper-50);
  border-color: var(--cf-paper-300);
  color: var(--cf-fg);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23556' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}