@import "tailwindcss";

@theme {
  --color-paper: #f5f0e8;
  --color-paper-warm: #efe9de;
  --color-ink: #1a1714;
  --color-ink-2: #4a4540;
  --color-ink-3: #8a8478;
  --color-ink-4: #b5afa5;
  --color-rule: #d5cfc5;
  --color-rule-light: #e5e0d6;
  --color-rust: #c4553a;
  --color-rust-dim: rgba(196, 85, 58, 0.08);
  --color-slate: #3d5a80;
  --color-slate-dim: rgba(61, 90, 128, 0.08);
  --color-ochre: #c49a3a;
  --color-ochre-dim: rgba(196, 154, 58, 0.08);
  --color-charcoal: #2d2926;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Menlo', monospace;
}

@layer base {
  * { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
    line-height: 1.65;
  }

  body {
    min-height: 100vh;
    background: var(--color-paper);
  }

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

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--color-rule); border-radius: 0; }
}

@layer components {
  .mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    font-size: 0.92em;
  }

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

  .ruled {
    border-bottom: 1px solid var(--color-rule);
  }

  .ruled-top {
    border-top: 1px solid var(--color-rule);
  }

  .thick-rule {
    border-bottom: 2px solid var(--color-ink);
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fold-open {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 2000px; }
}

.fold-open {
  animation: fold-open 0.35s cubic-bezier(0.25, 1, 0.5, 1) both;
  overflow: hidden;
}

.anim {
  animation: reveal 0.4s cubic-bezier(0.25, 1, 0.5, 1) both;
}

.d1 { animation-delay: 50ms; }
.d2 { animation-delay: 100ms; }
.d3 { animation-delay: 150ms; }
.d4 { animation-delay: 200ms; }
.d5 { animation-delay: 250ms; }
.d6 { animation-delay: 300ms; }