/* ============================================================
   tokens.css — palette, type scale, paper textures, easing
   ============================================================ */

:root {
  /* ---- paper & ink ---- */
  --paper:        #f3ead9;
  --paper-warm:   #efe2cb;
  --paper-deep:   #e4d4b8;
  --paper-edge:   #cdb998;
  --ink:          #2a231d;
  --ink-soft:     #6d5c4a;
  --ink-faint:    #9c8a74;

  /* ---- accents ---- */
  --oxblood:      #7c2f25;
  --gold:         #c6a24a;
  --gold-bright:  #e8cd84;
  --gold-deep:    #8a6a22;
  --navy:         #16202e;
  --navy-lift:    #243348;
  --teal:         #3c6260;
  --faded-blue:   #5d7490;
  --highlighter:  #e9d96a;

  /* ---- type ---- */
  --serif:   "Playfair Display", "Hoefler Text", Georgia, serif;
  --book:    "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --hand:    "Caveat", "Bradley Hand", cursive;
  --hand-2:  "Homemade Apple", "Caveat", cursive;
  --label:   "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- rhythm ---- */
  /* Sizes inside a page are all in cqi — see the note at the top of
     pages.css — so there is nothing to put here but the hairline. */
  --rule: 1px solid rgba(42, 35, 29, 0.22);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* ---- textures (inline SVG, no network) ---- */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");

  --fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.16' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E");

  --cloth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.45 0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23c)'/%3E%3C/svg%3E");
}

/* A few people really do not want the page moving around. */
@media (prefers-reduced-motion: reduce) {
  :root { --ease-out: linear; --ease-soft: linear; }
}