@font-face {
  font-family: 'STALPH';
  src: url('../assets/fonts/STALPH.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --pink-dark:   #f177ae;
  --pink-med:    #f494be;
  --pink-light:  #f0cbd9;
  --yellow:      #fad448;
  --blue:        #6581b8;
  --blue-light:  #9baad1;
  --black:       #231F20;
  --go-live:     #e63946;
  --wallet-green:#2ecc71;
  --white:       #ffffff;
  --off-white:   #fefefe;
  --surface-1:   #f0cbd9;
  --surface-2:   #ffffff;
  --surface-3:   #9baad1;
  --surface-nav: #ffffff;
  --font-display: 'STALPH', Georgia, serif;
  --font-body: var(--font-display);
  --font-ui: var(--font-display);
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;
  --shadow-card:   0 2px 12px rgba(35,31,32,0.10);
  --shadow-pop:    0 6px 24px rgba(241,119,174,0.25);
  --shadow-nav:    0 2px 8px rgba(35,31,32,0.08);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     150ms;
  --dur-med:      280ms;
  --dur-slow:     500ms;
  --nav-h: 80px;
  --sidebar-w: 160px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body { font-family: var(--font-body); background: var(--blue-light); color: var(--black); min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
img, svg { display: block; max-width: 100%; }
input, textarea { font-family: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--pink-light); }
::-webkit-scrollbar-thumb { background: var(--pink-med); border-radius: var(--radius-pill); }
.stalph { font-family: var(--font-display); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes drip { 0% { transform: translateY(-8px); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.15); } 70% { transform: scale(1); } }
.anim-fade-up   { animation: fadeUp  var(--dur-med) var(--ease-smooth) both; }
.anim-fade-in   { animation: fadeIn  var(--dur-med) var(--ease-smooth) both; }
.anim-drip      { animation: drip    var(--dur-slow) var(--ease-bounce) both; }
.anim-heartbeat { animation: heartbeat 1.4s ease-in-out infinite; }