@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Dancing+Script:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

:root {
  --primary:        #B50059;
  --primary-light:  #FF3D8A;
  --primary-fixed:  #FF709E;
  --surface:        #F6F6F4;
  --surface-lowest: #FFFFFF;
  --on-surface:     #2D2F2E;
  --on-surface-var: #5A5C5B;
  --gradient-primary: linear-gradient(135deg, #B50059, #FF709E);
}

* { box-sizing: border-box; }

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga' 1;
  -webkit-font-feature-settings: 'liga' 1;
}

.font-accent {
  font-family: 'Dancing Script', cursive;
}

html {
  scroll-behavior: smooth;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #E7E8E6 25%, #F0F1EF 50%, #E7E8E6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 0.5rem;
}

.border-ghost {
  border: 1px solid rgba(172, 173, 172, 0.15);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}