:root {
  color-scheme: light;
  --sea-blue: #082D4B;
  --cyanotype-layer: #0E4568;
  --measurement-cyan: #8FC9D0;
  --developer-gold: #F0D184;
  --archive-paper: #F5F0E3;
  --archive-ink: #183647;
  --danger: #9E2A2B;
  --danger-paper: #FBE9E3;
  --line: color-mix(in srgb, var(--sea-blue) 20%, transparent);
  --line-strong: color-mix(in srgb, var(--sea-blue) 45%, transparent);
  --paper-shadow: 0 18px 44px rgb(8 45 75 / 18%);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.9rem;
  --motion-fast: 180ms;
  --motion-slow: 260ms;
  --blueprint-grid: linear-gradient(rgb(143 201 208 / 13%) 1px, transparent 1px), linear-gradient(90deg, rgb(143 201 208 / 13%) 1px, transparent 1px);
  --reticle: radial-gradient(circle, var(--developer-gold) 0 2px, transparent 2.5px), linear-gradient(var(--developer-gold), var(--developer-gold)) center / 1px 100% no-repeat, linear-gradient(90deg, var(--developer-gold), var(--developer-gold)) center / 100% 1px no-repeat;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid var(--developer-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}