/* ============================================================
   Kate's Quest — Textures & Surface Treatments
   ------------------------------------------------------------
   The brand lives on AGED PAPER. These utilities layer subtle
   gradients (and an SVG grain) to fake parchment, foxing, and the
   warm vignette of a scanned antique card — without shipping image
   files. Apply .kq-paper to any card field.
   ============================================================ */

:root {
  /* A reusable grain layer (feTurbulence baked into a data URI). */
  --texture-grain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29' opacity='0.5'/%3E%3C/svg%3E"); /* @kind other */

  /* Warm foxing / tea-stain blooms scattered across the sheet. */
  --texture-foxing:
    radial-gradient(140px 120px at 12% 18%, rgb(160 120 60 / 0.10), transparent 70%),
    radial-gradient(160px 130px at 88% 22%, rgb(150 100 50 / 0.08), transparent 72%),
    radial-gradient(200px 160px at 78% 88%, rgb(120 80 40 / 0.10), transparent 70%),
    radial-gradient(120px 110px at 20% 82%, rgb(140 95 45 / 0.07), transparent 72%); /* @kind other */

  /* Vignette that darkens the deckle edges of a card. */
  --texture-vignette:
    radial-gradient(120% 120% at 50% 40%, transparent 55%, rgb(80 55 25 / 0.16) 100%); /* @kind other */

  --paper-base: linear-gradient(180deg, var(--paper-50), var(--paper-200));
}

/* ------------------------------------------------------------
   .kq-paper — the canonical parchment fill.
   ------------------------------------------------------------ */
.kq-paper {
  background-color: var(--paper-100);
  background-image:
    var(--texture-foxing),
    var(--texture-vignette),
    var(--paper-base);
  background-blend-mode: multiply, multiply, normal;
  position: relative;
}

/* Add fine grain on top via a pseudo-element (keeps it non-interactive). */
.kq-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--texture-grain);
  background-size: 180px 180px;
  opacity: 0.35;
  mix-blend-mode: multiply;
  pointer-events: none;
  border-radius: inherit;
}

/* A darker "kraft / map" variant for section backgrounds. */
.kq-paper--aged {
  background-color: var(--paper-300);
  background-image:
    var(--texture-foxing),
    var(--texture-vignette),
    linear-gradient(180deg, var(--paper-200), var(--paper-400));
  background-blend-mode: multiply, multiply, normal;
}

/* The "desk" surface a collection of cards rests on. */
.kq-desk {
  background-color: var(--paper-400);
  background-image:
    radial-gradient(140% 120% at 50% 0%, rgb(247 239 220 / 0.4), transparent 60%),
    var(--texture-vignette),
    linear-gradient(180deg, var(--paper-300), var(--paper-500));
}