/* ============================================================================
   garaliving — Components (button, card, icon-button, tab, stars)
   Consumes tokens.css only. No raw literals.
   ========================================================================== */

/* --- Button --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition:
    background-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease),
    transform var(--motion-fast) var(--motion-ease);
}

.btn:active { transform: translateY(1px); }

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

/* Primary — navy fill */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-brand);
}
.btn--primary:hover { background-color: var(--color-primary-hover); }
.btn--primary:active { background-color: var(--color-primary-active); }

/* Secondary / outline */
.btn--outline {
  background-color: transparent;
  color: var(--color-navy);
  border-color: var(--color-border);
}
.btn--outline:hover {
  border-color: var(--color-navy);
  background-color: var(--color-surface);
}

/* Tertiary text-link style with arrow */
.btn--link {
  min-height: 0;
  padding: 0;
  color: var(--color-navy);
  font-weight: 600;
  font-size: var(--text-sm);
  background: none;
}
.btn--link:hover { color: var(--color-primary-hover); }

.btn--block { width: 100%; }
.btn--lg { min-height: 52px; padding: var(--space-4) var(--space-6); font-size: var(--text-base); }

/* --- Text link with trailing arrow --------------------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-navy);
  font-size: var(--text-sm);
  font-weight: 600;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform var(--motion-base) var(--motion-ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* --- Icon button (search / cart / carousel / social) --------------------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--color-navy);
  transition:
    background-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease),
    border-color var(--motion-base) var(--motion-ease);
}
.icon-btn:hover { background-color: var(--color-surface-alt); }
.icon-btn svg { width: 20px; height: 20px; }

.icon-btn--ring {
  border: 1px solid var(--color-border);
}
.icon-btn--ring:hover { border-color: var(--color-navy); background: var(--color-surface); }

/* --- Card ----------------------------------------------------------------- */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    box-shadow var(--motion-base) var(--motion-ease),
    transform var(--motion-base) var(--motion-ease);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* --- Tab (gallery filter) ------------------------------------------------- */
.tab {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  transition:
    background-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease);
}
.tab:hover { color: var(--color-navy); background-color: var(--color-surface-alt); }
.tab[aria-pressed="true"] {
  background-color: var(--color-navy);
  color: var(--color-text-on-brand);
}

/* --- Star rating ---------------------------------------------------------- */
.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--color-navy);
}
.stars svg { width: 18px; height: 18px; }

/* --- Hairline divider ----------------------------------------------------- */
.hairline {
  border: 0;
  border-top: 1px solid var(--color-border);
}