/* ===========================================================
   ARCHIVE INDEX — Design tokens
   Concept: a physical library card-catalog, digitised.
   =========================================================== */

:root {
  /* --- Palette: cream paper + navy cabinet + orange hardware --- */
  --paper:        #FBEFDC;   /* aged index card, cream */
  --paper-soft:   #F3E1BE;   /* card recess / hover */
  --paper-line:   #E0C89A;   /* hairline rule on paper */
  --wood:         #142240;   /* drawer / cabinet, navy */
  --wood-soft:    #1D2F55;   /* navy panel highlight */
  --ink:          #24262E;   /* primary text on paper (cool near-black) */
  --ink-soft:     #6E6A5D;   /* secondary text on paper */
  --brass:        #E17A2D;   /* hardware / primary accent, orange */
  --brass-light:  #F2A15C;   /* orange hover */
  --stamp:        #1B2E52;   /* category stamp, navy */
  --stamp-light:  #3E5686;
  --rust:         #B0432B;   /* destructive actions only */
  --rust-light:   #C56C50;

  /* --- Typography --- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "IBM Plex Sans", "Vazirmatn", "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", "Courier New", monospace;

  /* --- Scale --- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --shadow-card: 0 1px 0 rgba(20,34,64,0.06), 0 6px 16px -8px rgba(20,34,64,0.35);
  --shadow-lift: 0 12px 28px -10px rgba(20,34,64,0.45);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* Paper grain texture, reused on both pages */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}