/* VPDS component classes */

.vp-page {
  font-family: var(--vp-font);
  color: var(--vp-text, #edf0f4);
  background: var(--vp-surface-0);
}

.vp-container {
  max-width: var(--vp-content-max);
  margin-inline: auto;
  padding-inline: var(--vp-space-4);
}

/* Typography utilities */
.vp-hero-title {
  font-size: var(--vp-text-hero);
  font-weight: 800;
  line-height: var(--vp-leading-tight);
  letter-spacing: -0.02em;
}

.vp-page-title {
  font-size: var(--vp-text-page);
  font-weight: 700;
  line-height: var(--vp-leading-tight);
}

.vp-section-title {
  font-size: var(--vp-text-section);
  font-weight: 700;
  line-height: var(--vp-leading-tight);
}

.vp-card-title {
  font-size: var(--vp-text-card);
  font-weight: 600;
  line-height: var(--vp-leading-tight);
}

.vp-body { font-size: var(--vp-text-body); line-height: var(--vp-leading-normal); }
.vp-caption { font-size: var(--vp-text-caption); line-height: var(--vp-leading-normal); color: #718096; }
.vp-small { font-size: var(--vp-text-small); line-height: var(--vp-leading-normal); color: #718096; }

/* Card — one elevation, glass, never nested */
.vp-card {
  border-radius: var(--vp-radius-card);
  padding: var(--vp-space-6);
  background: var(--vp-glass-bg);
  border: var(--vp-glass-border);
  box-shadow: var(--vp-shadow-float);
  backdrop-filter: var(--vp-glass-blur);
  -webkit-backdrop-filter: var(--vp-glass-blur);
}

.vp-card + .vp-card { margin-top: var(--vp-space-4); }

/* Buttons — 56px primary */
.vp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vp-space-2);
  min-height: 56px;
  padding: 0 var(--vp-space-6);
  border-radius: var(--vp-radius-button);
  font-family: var(--vp-font);
  font-size: var(--vp-text-caption);
  font-weight: 600;
  line-height: 1;
  border: none;
  cursor: pointer;
  transition: transform var(--vp-duration-fast) var(--vp-ease), box-shadow var(--vp-duration) var(--vp-ease);
}

.vp-btn:hover { transform: translateY(-1px); }
.vp-btn:active { transform: translateY(0); }

.vp-btn-primary {
  background: linear-gradient(135deg, var(--vp-primary), color-mix(in srgb, var(--vp-primary) 70%, #000));
  color: var(--vp-text, #fff);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--vp-primary) 35%, transparent);
}

.vp-btn-secondary {
  background: color-mix(in srgb, var(--vp-primary) 12%, rgba(255,255,255,0.06));
  color: var(--vp-text, #edf0f4);
  border: 1px solid color-mix(in srgb, var(--vp-primary) 30%, transparent);
  backdrop-filter: blur(12px);
}

.vp-btn-ghost {
  background: transparent;
  color: var(--vp-text, #edf0f4);
  border: 1px solid transparent;
}

.vp-btn-danger {
  background: color-mix(in srgb, var(--vp-danger, #e53935) 85%, #000);
  color: #fff;
}

.vp-btn-sm {
  min-height: 44px;
  padding: 0 var(--vp-space-4);
  font-size: var(--vp-text-small);
}

/* Inputs */
.vp-input {
  width: 100%;
  min-height: 56px;
  padding: var(--vp-space-4);
  border-radius: var(--vp-radius-input);
  font-family: var(--vp-font);
  font-size: var(--vp-text-body);
  color: var(--vp-text, #edf0f4);
  background: color-mix(in srgb, var(--vp-surface-0) 80%, rgba(255,255,255,0.04));
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color var(--vp-duration) var(--vp-ease), box-shadow var(--vp-duration) var(--vp-ease);
}

.vp-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--vp-primary) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vp-primary) 18%, transparent);
}

.vp-input::placeholder { color: #718096; }

/* Bottom nav — floating glass */
.vp-bottom-nav {
  position: fixed;
  bottom: var(--vp-space-4);
  left: var(--vp-space-4);
  right: var(--vp-space-4);
  z-index: 50;
  display: flex;
  align-items: stretch;
  min-height: var(--vp-nav-height);
  padding: var(--vp-space-2);
  border-radius: var(--vp-radius-dialog);
  background: color-mix(in srgb, var(--vp-surface-4) 92%, transparent);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: var(--vp-shadow-lg);
}

.vp-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--vp-space-1);
  padding: var(--vp-space-2);
  border-radius: var(--vp-radius-button);
  font-size: 11px;
  font-weight: 500;
  color: #718096;
  text-decoration: none;
  transition: color var(--vp-duration) var(--vp-ease), background var(--vp-duration) var(--vp-ease);
}

.vp-bottom-nav-item--active {
  color: var(--vp-primary);
  background: color-mix(in srgb, var(--vp-primary) 12%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--vp-primary) 25%, transparent);
}

/* Skeleton */
.vp-skeleton {
  border-radius: var(--vp-radius-input);
  min-height: 1em;
  background: rgba(255, 255, 255, 0.06);
}

/* Empty state */
.vp-empty {
  text-align: center;
  padding: var(--vp-space-12) var(--vp-space-6);
}

.vp-empty-icon {
  font-size: 48px;
  margin-bottom: var(--vp-space-4);
  opacity: 0.85;
}

/* Success / error */
.vp-success {
  color: var(--vp-success, #2ecc71);
  animation: vp-success-pop 0.4s var(--vp-ease);
}

.vp-error {
  color: var(--vp-danger, #e53935);
  font-size: var(--vp-text-caption);
}

/* Accessibility */
.vp-large-text { font-size: 112%; }
.vp-high-contrast .vp-card { border-width: 2px; }
.vp-high-contrast .vp-caption,
.vp-high-contrast .vp-small { color: #a0aec0; }