:root {
  --color-magenta: #a71b69;
  --color-cyan:    #309597;
  --color-yellow:  #f6d969;
  --color-orange:  #f26541;
  --color-dark:    #1a1a2e;
  --color-darker:  #000000;

  --font-display: 'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-nav:     'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-brand:   'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Lexend', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
  --font-serif:   'EB Garamond', Georgia, serif;
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;

  --radius-sm:   0.5rem;
  --radius-md:   1rem;
  --radius-full: 9999px;

  --space-sm:  0.75rem;
  --space-md:  1.5rem;
  --space-lg:  3rem;
  --space-xl:  6rem;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}
.font-display { font-family: var(--font-display); }
.font-nav {
  font-family: var(--font-nav);
}
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

/* Override compiled Tailwind font utilities to use Lexend */
html {
  font-family: var(--font-sans);
}
.font-sans  { font-family: var(--font-sans);  }
.font-nav   { font-family: var(--font-nav);   }
.font-brand { font-family: var(--font-brand); }

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-darker);
  color: #E9ECF2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes particle-travel {
  from { offset-distance: 0%;   opacity: 1; }
  to   { offset-distance: 100%; opacity: 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

.animate-float { animation: float 6s ease-in-out infinite; }