@import "tailwindcss";

:root {
  --ink: #11100f;
  --ink-raised: #1b1917;
  --paper: #f4f0e8;
  --paper-dim: #d4cec4;
  --ruby: #e85d4a;
  --ruby-bright: #ff806b;
  --sage: #a5c6a1;
  --line: rgba(244, 240, 232, .14);
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --display: "Space Grotesk", "Avenir Next", "Helvetica Neue", sans-serif;
}

@keyframes cursor-blink { 0%, 45% { opacity: 1 } 46%, 100% { opacity: .2 } }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: translateY(0) } }

html { scroll-behavior: smooth; scroll-padding-top: 4rem; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--display); }
::selection { background: var(--ruby); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ruby-bright); outline-offset: 4px; }

.font-display { font-family: var(--display); }
.font-mono { font-family: var(--mono); }
.reveal { animation: rise-in .7s cubic-bezier(.16,1,.3,1) both; }
.reveal-delay-1 { animation-delay: 120ms; }
.reveal-delay-2 { animation-delay: 220ms; }
.reveal-delay-3 { animation-delay: 320ms; }
.cursor-blink { animation: cursor-blink 1.1s steps(1) infinite; }

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