@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Archivo+Expanded:wght@600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

/* Core Variables & Design System */
:root {
  --ink: #34302A;
  --paper: #F4F1EA;
  --tint: #ECE5D8;
  --clay: #B26A52;
  --sage: #8A9482;
  --taupe: #BCAF9B;
  --muted: #807A6E;
  --line: #DBD5C8;
  --font-sans: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', monospace;
}

/* Global Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--clay);
  color: var(--paper);
}

/* Keyframes & Animations */
@keyframes kt-spin {
  to { transform: rotate(360deg); }
}

@keyframes kt-travel {
  0% { left: 0%; }
  100% { left: 100%; }
}

.animate-spin {
  animation: kt-spin 11s linear infinite;
}

.animate-travel {
  animation: kt-travel 5s cubic-bezier(.65, 0, .35, 1) infinite alternate;
}