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

  --font-display: 'Exo 2', system-ui, -apple-system, sans-serif;
  --font-nav:     'Exo 2', system-ui, -apple-system, sans-serif;
  --font-brand:   'Exo 2', system-ui, -apple-system, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 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-nav {
  font-family: var(--font-nav);
}
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  background-color: var(--color-darker);
  color: #f1f5f9;
  -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; }
}

.font-formula {
  font-family: var(--font-serif);
}

::selection {
  background-color: rgba(236, 0, 72, 0.3);
  color: #f6d969;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.5rem;
  background: #f6d969;
  color: #121212;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0 0 0.5rem 0.5rem;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #ec0048;
  outline-offset: 2px;
}

:focus-visible {
  outline: 3px solid #309597;
  outline-offset: 3px;
  border-radius: 3px;
}
button:focus-visible,
a:focus-visible {
  outline: 3px solid #309597;
  outline-offset: 3px;
  border-radius: 4px;
}

@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;
  }
}