/* WebShelf — Pure CSS Design System & Theme Styles */
:root {
  --primary: #3525cd;
  --primary-container: #4f46e5;
  --on-primary: #ffffff;
  --primary-fixed-dim: #c3c0ff;
  --secondary: #712ae2;
  --secondary-container: #8a4cfc;
  --on-secondary: #ffffff;
  --secondary-fixed: #eaddff;
  --secondary-fixed-dim: #d2bbff;
  --surface: #f9f9ff;
  --surface-low: #f1f3ff;
  --surface-high: #e1e8fd;
  --surface-highest: #dce2f7;
  --surface-lowest: #ffffff;
  --on-surface: #141b2b;
  --on-surface-variant: #464555;
  --inverse-surface: #293040;
  --inverse-on-surface: #edf0ff;
  --outline: #777587;
  --outline-variant: #c7c4d8;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-full: 9999px;
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

/* Material Symbols icon utility */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

.material-symbols-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

/* Custom scrollbars */
::-webkit-scrollbar {
  display: none;
}

/* Device mock frame responsive transitions */
.device-frame-transition {
  transition: max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1), height 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating pulse animation */
@keyframes pulseGlow {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.05); }
}

.ambient-orb {
  animation: pulseGlow 8s ease-in-out infinite;
}