@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════════════════════ */
:root {
  /* Core palette */
  --c-ink:        #080808;
  --c-surface:    #0e0e0e;
  --c-chalk:      #f0ece6;
  --c-ember:      #F40009;
  --c-gold:       #c9a24e;
  --c-mist:       #1c1c1c;
  --c-error:      #ef4444;
  --c-success:    #22c55e;
  --c-purp:       #390c42;
  --yellow:       #e5a21a;
  --yellow-dark:  #d19414;

  /* Alpha chalk */
  --c-chalk-70:   rgba(240, 236, 230, 0.70);
  --c-chalk-50:   rgba(240, 236, 230, 0.50);
  --c-chalk-35:   rgba(240, 236, 230, 0.35);
  --c-chalk-30:   rgba(240, 236, 230, 0.30);
  --c-chalk-20:   rgba(240, 236, 230, 0.20);
  --c-chalk-15:   rgba(240, 236, 230, 0.15);
  --c-chalk-07:   rgba(240, 236, 230, 0.07);

  /* Typography */
  --f-display: "Inter", sans-serif;
  --f-body:    "Inter", sans-serif;
  --f-mono:    "Space Mono", monospace;

  /* Easing */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slide: cubic-bezier(0.77, 0, 0.175, 1);

  /* Transitions */
  --t-xs:  0.12s ease;
  --t-sm:  0.22s ease;
  --t-md:  0.38s ease;
  --t-lg:  0.65s var(--ease-out);
}

/* ════════════════════════════════════════════════════════════
   RESET
════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--c-ink);
  color: var(--c-chalk);
  font-family: var(--f-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }

/* ════════════════════════════════════════════════════════════
   SCROLLBAR
════════════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: var(--c-ink); }
::-webkit-scrollbar-thumb { background: var(--c-ember); border-radius: 2px; }

/* ════════════════════════════════════════════════════════════
   SHARED KEYFRAMES
════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0);     }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%       { opacity: 0.4; transform: scale(1.6); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes scrollDrop {
  0%   { transform: translateY(-100%); opacity: 0; }
  25%  { opacity: 1; }
  100% { transform: translateY(200%);  opacity: 0; }
}

@keyframes shimmerSlide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%);  }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1);    }
}

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