/* ============================================================
   COMPONENTS — VEVARIA DESIGN SYSTEM (STRIPE-STYLE)
   ============================================================ */

/* ------------------------------------------------------------
   BUTTONS
------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: 500;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  border: none;
  outline: none;
  text-decoration: none;
  line-height: 1.2;
  user-select: none;
}

/* Disabled */
.btn:disabled,
.btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary Button (Stripe-style) */
.btn-primary {
  background: var(--accent);
  color: var(--neutral-0);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

.btn-primary:active {
  background: var(--accent-active);
  transform: scale(0.98);
}

/* Secondary Button */
.btn-secondary {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
}

.btn-secondary:hover {
  background: var(--surface-3);
}

.btn-secondary:active {
  background: var(--surface-4);
  transform: scale(0.98);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--surface-2);
}

.btn-ghost:active {
  background: var(--surface-3);
  transform: scale(0.98);
}

/* Button Sizes */
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-lg);
}

/* Icon Support */
.btn .icon {
  display: inline-flex;
  margin-right: var(--space-2);
}

.btn.icon-right .icon {
  margin-right: 0;
  margin-left: var(--space-2);
}


/* ------------------------------------------------------------
   CARDS
------------------------------------------------------------ */

.card {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: all var(--duration-normal) var(--ease-default);
}

/* Hoverable Card */
.card-hover:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Interactive Card */
.card-interactive {
  cursor: pointer;
}

.card-interactive:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.card-interactive:active {
  transform: translateY(-1px) scale(0.99);
}

/* Strong Shadow Card */
.card-shadow {
  box-shadow: var(--shadow-lg);
}


/* ------------------------------------------------------------
   INPUTS
------------------------------------------------------------ */

.input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--duration-normal) var(--ease-default);
  outline: none;
}

/* Focus State (Stripe-style glow) */
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Disabled */
.input:disabled,
.input-disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Error State */
.input-error {
  border-color: #e5484d;
  background: rgba(229, 72, 77, 0.08);
}

.input-error:focus {
  box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.25);
}

/* Success State */
.input-success {
  border-color: #2ecc71;
  background: rgba(46, 204, 113, 0.08);
}

.input-success:focus {
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.25);
}

/* Input Sizes */
.input-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
}

.input-lg {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-lg);
}


/* ------------------------------------------------------------
   TEXTAREA
------------------------------------------------------------ */

.textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  resize: vertical;
  transition: all var(--duration-normal) var(--ease-default);
}

.textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}


/* ------------------------------------------------------------
   SELECT
------------------------------------------------------------ */

.select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--duration-normal) var(--ease-default);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%238E94A0' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
}

.select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}


/* ------------------------------------------------------------
   LABELS & FORM GROUPS
------------------------------------------------------------ */

.label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.form-group {
  margin-bottom: var(--space-4);
}