/*
  Book Sell — "Bookshop Ledger" design system.
  Direction: a warm, literary point-of-sale that feels like a well-kept
  bookseller's ledger — ivory paper, ink, oxblood bookcloth, aged brass foil,
  and a deep spruce for calm data surfaces. Editorial serif headings
  (Newsreader), a clean humanist body (Inter), and a monospace (IBM Plex Mono)
  reserved for numbers, labels and metadata so figures read like a receipt.
*/
:root {
  /* ---- Color: paper & ink ---- */
  --color-ink: #241c17;
  --color-ink-soft: #6a5f55;
  --color-ink-faint: #9a8f83;
  --color-paper: #f4ecdd;
  --color-paper-raised: #fffaf1;
  --color-paper-sunk: #ece2cf;
  --color-line: #ddd0ba;
  --color-line-soft: #e8ddca;

  /* ---- Color: bookcloth (primary / oxblood) ---- */
  --color-cloth: #7c2d2f;
  --color-cloth-deep: #5c1f21;
  --color-cloth-tint: #f0dcd6;

  /* ---- Color: spruce (secondary / calm surfaces) ---- */
  --color-spruce: #1f3a3d;
  --color-spruce-deep: #142829;
  --color-spruce-tint: #dbe6e3;

  /* ---- Color: brass (accent / foil) ---- */
  --color-brass: #b0842f;
  --color-brass-deep: #8c6722;
  --color-brass-tint: #f3e6c8;

  /* ---- Status ---- */
  --color-success: #2f6b4f;
  --color-success-tint: #d9ebdf;
  --color-warn: #9a6412;
  --color-warn-tint: #f6e6c8;
  --color-danger: #a5372a;
  --color-danger-tint: #f4dbd5;

  /* ---- Typography ---- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-3xl: 3rem;

  /* ---- Spacing ---- */
  --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;
  --space-9: 6rem;

  /* ---- Radius ---- */
  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadow (warm, never pure black) ---- */
  --shadow-rest: 0 1px 2px rgba(36, 28, 23, 0.06), 0 4px 14px rgba(36, 28, 23, 0.06);
  --shadow-hover: 0 8px 26px rgba(36, 28, 23, 0.14);
  --shadow-pop: 0 18px 50px rgba(36, 28, 23, 0.22);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;

  /* ---- Layout ---- */
  --content-width: 1200px;
  --header-height: 74px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}