/*
 * GOOBER FRAMEWORK — components.css
 * Version: 1.0.0
 */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 28px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  border-radius: var(--radius, 8px); cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition, 200ms ease);
  position: relative; overflow: hidden;
}
.btn:focus-visible { outline: 3px solid var(--color-primary, #2563EB); outline-offset: 3px; }

.btn-primary { background: var(--color-cta, #F97316); color: #FFFFFF; border-color: var(--color-cta, #F97316); }
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 20px var(--shadow-brand, rgba(249,115,22,0.35)); color: #FFFFFF; }
.btn-primary:active { transform: translateY(0); filter: brightness(0.96); }

.btn-secondary { background: transparent; color: var(--color-primary, #2563EB); border-color: var(--color-primary, #2563EB); }
.btn-secondary:hover { background: var(--color-primary, #2563EB); color: #FFFFFF; transform: translateY(-1px); }
.btn-secondary:active { transform: translateY(0); }

.btn-white { background: #FFFFFF; color: var(--color-primary, #2563EB); border-color: #FFFFFF; }
.btn-white:hover { background: var(--color-bg-alt, #F8FAFC); transform: translateY(-1px); color: var(--color-primary, #2563EB); }

.btn-ghost { background: transparent; color: var(--color-text, #1E293B); border-color: transparent; }
.btn-ghost:hover { background: var(--color-bg-alt, #F8FAFC); }

.btn-sm { min-height: 36px; padding: 8px 18px; font-size: 0.8125rem; }
.btn-lg { min-height: 56px; padding: 16px 36px; font-size: 1rem; }

/* Cards */
.card {
  background: var(--color-bg, #FFFFFF); border-radius: var(--radius-lg, 16px);
  padding: var(--space-lg, 32px); box-shadow: var(--shadow-md);
  transition: transform var(--transition, 200ms ease), box-shadow var(--transition, 200ms ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.card-bordered {
  background: var(--color-bg, #FFFFFF); border-radius: var(--radius-lg, 16px);
  padding: var(--space-lg, 32px); border: 1px solid var(--color-border, #E2E8F0);
  box-shadow: none; transition: border-color var(--transition, 200ms ease), transform var(--transition, 200ms ease);
}
.card-bordered:hover { border-color: var(--color-primary, #2563EB); transform: translateY(-2px); }

.card-flat { background: var(--color-bg, #FFFFFF); border-radius: var(--radius-lg, 16px); padding: var(--space-lg, 32px); }

.card-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--radius, 8px);
  background: var(--color-accent-light, #EFF6FF); color: var(--color-primary, #2563EB);
  font-size: 1.5rem; margin-bottom: var(--space-md, 24px); flex-shrink: 0;
}

.card-header { margin-bottom: var(--space-md, 24px); padding-bottom: var(--space-md, 24px); border-bottom: 1px solid var(--color-border, #E2E8F0); }
.card-body { flex: 1; }
.card-footer { margin-top: var(--space-md, 24px); padding-top: var(--space-md, 24px); border-top: 1px solid var(--color-border, #E2E8F0); }

/* Forms */
.form-group { margin-bottom: var(--space-md, 24px); }
.form-label { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--color-text, #1E293B); margin-bottom: 6px; }

.form-input,.form-textarea,.form-select {
  display: block; width: 100%; min-height: 48px; padding: 12px 16px;
  font-family: var(--font-body, system-ui, sans-serif); font-size: 1rem;
  color: var(--color-text, #1E293B); background: var(--color-bg, #FFFFFF);
  border: 1.5px solid var(--color-border, #E2E8F0); border-radius: var(--radius, 8px);
  transition: border-color var(--transition, 200ms ease), box-shadow var(--transition, 200ms ease);
  outline: none;
}
.form-input:focus,.form-textarea:focus,.form-select:focus {
  border-color: var(--color-primary, #2563EB);
  box-shadow: 0 0 0 3px var(--color-accent-light, #EFF6FF);
}
.form-input::placeholder,.form-textarea::placeholder { color: var(--color-text-light, #94A3B8); }
.form-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.form-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px;
}
.form-error { display: block; color: #DC2626; font-size: 0.8125rem; margin-top: 4px; font-weight: 500; }
.form-hint { display: block; color: var(--color-text-muted, #475569); font-size: 0.8125rem; margin-top: 4px; }
.form-row { display: flex; gap: var(--space-md, 24px); flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 200px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; border-radius: var(--radius-full, 9999px); line-height: 1.2; }
.badge-primary { background: var(--color-accent-light, #EFF6FF); color: var(--color-primary, #2563EB); }
.badge-success { background: #DCFCE7; color: #166534; }
.badge-warning { background: #FEF3C7; color: #92400E; }
.badge-error { background: #FEE2E2; color: #991B1B; }
.badge-muted { background: var(--color-bg-alt, #F8FAFC); color: var(--color-text-muted, #475569); }

/* Dividers */
.divider { border: none; border-top: 1px solid var(--color-border, #E2E8F0); margin: var(--space-xl, 48px) 0; }
.divider-text { display: flex; align-items: center; gap: var(--space-md, 24px); color: var(--color-text-light, #94A3B8); font-size: 0.875rem; font-weight: 500; margin: var(--space-xl, 48px) 0; }
.divider-text::before,.divider-text::after { content: ''; flex: 1; border-top: 1px solid var(--color-border, #E2E8F0); }

/* Avatars */
.avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-full, 9999px); overflow: hidden; background: var(--color-accent-light, #EFF6FF); color: var(--color-primary, #2563EB); font-weight: 700; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; }
.avatar-md { width: 48px; height: 48px; font-size: 1rem; }
.avatar-lg { width: 72px; height: 72px; font-size: 1.5rem; }

/* Loading states */
.spinner { display: inline-block; width: 24px; height: 24px; border: 3px solid var(--color-border, #E2E8F0); border-top-color: var(--color-primary, #2563EB); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton { background: linear-gradient(90deg, var(--color-bg-alt, #F8FAFC) 25%, var(--color-border, #E2E8F0) 50%, var(--color-bg-alt, #F8FAFC) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius, 8px); }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }