/*
 * buttons.css — Button variants
 * Grailsome Design System — Section 5.1
 */

/* -------------------------------------------------------
   Base button
------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
  border-radius: 3px;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: background var(--duration-medium) var(--ease-out),
              color var(--duration-medium) var(--ease-out),
              border-color var(--duration-medium) var(--ease-out),
              box-shadow var(--duration-medium) var(--ease-out);
  text-decoration: none;
  line-height: 1;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* -------------------------------------------------------
   Primary — ink fill, ivory text
------------------------------------------------------- */

.btn--primary {
  background: var(--color-ink);
  color: var(--color-ivory);
  border-color: var(--color-ink);
}

.btn--primary:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-ivory);
}

/* -------------------------------------------------------
   Secondary — outline
------------------------------------------------------- */

.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.btn--secondary:hover {
  background: var(--color-ink);
  color: var(--color-ivory);
}

/* -------------------------------------------------------
   Amber CTA — featured / trial
------------------------------------------------------- */

.btn--amber {
  background: var(--color-amber);
  color: var(--color-ink);
  border-color: var(--color-amber);
}

.btn--amber:hover {
  background: var(--color-amber-2);
  border-color: var(--color-amber-2);
  box-shadow: 0 0 24px rgba(232, 150, 12, 0.3);
}

/* -------------------------------------------------------
   Inverse — for use on dark / red backgrounds
------------------------------------------------------- */

.btn--inverse {
  background: var(--color-ivory);
  color: var(--color-red);
  border-color: var(--color-ivory);
}

.btn--inverse:hover {
  background: transparent;
  color: var(--color-ivory);
}

/* Ghost variant for dark backgrounds */
.btn--ghost-light {
  background: transparent;
  color: var(--color-ivory);
  border-color: rgba(250, 246, 238, 0.4);
}

.btn--ghost-light:hover {
  border-color: var(--color-ivory);
  background: rgba(250, 246, 238, 0.1);
}

/* -------------------------------------------------------
   Small size modifier
------------------------------------------------------- */

.btn--small {
  padding: 0.5rem 1.25rem;
  font-size: 0.75rem;
}

/* -------------------------------------------------------
   Link style — no bg or border, red text
------------------------------------------------------- */

.btn--link {
  background: none;
  border-color: transparent;
  color: var(--color-red);
  padding-inline: 0;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

.btn--link:hover {
  text-decoration: underline;
  background: none;
  border-color: transparent;
}

/* -------------------------------------------------------
   Extra small — share row actions
------------------------------------------------------- */

.btn--xs {
  padding: 0.35rem 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------
   Outline — subtle variant
------------------------------------------------------- */

.btn--outline {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-parch-2);
}

.btn--outline:hover {
  border-color: var(--color-ink);
}

/* -------------------------------------------------------
   Danger — destructive actions
------------------------------------------------------- */

.btn--danger {
  background: var(--color-red);
  color: var(--color-ivory);
  border-color: var(--color-red);
}

.btn--danger:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
}