/* ════════════════════════════════════════════════════════════
   PAPER TEXTURE — the core design language of the brand.
   Real scanned paper, layered behind surfaces and onto color.
   Tokens hold the image URLs; helper classes apply the recipes.
   ════════════════════════════════════════════════════════════ */
:root {
  /* raw texture sources (flat = subtle, creased = wrinkled) */
  --paper-1: url("../assets/textures/paper-1.jpg"); /* @kind other */ /* flat, soft fibers */
  --paper-2: url("../assets/textures/paper-2.jpg"); /* @kind other */ /* flat, fine grain */
  --paper-3: url("../assets/textures/paper-3.jpg"); /* @kind other */ /* creased, warm */
  --paper-4: url("../assets/textures/paper-4.jpg"); /* @kind other */ /* creased, fibrous */

  /* semantic aliases */
  --paper-texture:      var(--paper-1); /* @kind other */ /* default page/card grain */
  --paper-texture-alt:  var(--paper-2); /* @kind other */
  --paper-creased:      var(--paper-3); /* @kind other */ /* hero / feature panels */
  --paper-creased-alt:  var(--paper-4); /* @kind other */

  /* base tint that sits UNDER the texture */
  --paper-tint:  #f3ede7; /* @kind color */
  --paper-white: #fffdf9; /* @kind color */ /* "white" paper for cards */
}

/* ── Recipes ───────────────────────────────────────────────
   Apply paper to any surface. Use the blend-mode variants to
   keep brand color while picking up the fiber grain. */

/* warm paper page / section background */
.paper-surface {
  background-color: var(--paper-tint);
  background-image: var(--paper-texture);
  background-size: cover;
  background-position: center;
}
.paper-surface--creased { background-image: var(--paper-creased); }
.paper-surface--fixed   { background-attachment: fixed; }

/* white card stock — texture multiplied onto near-white */
.paper-card {
  background-color: var(--paper-white);
  background-image: var(--paper-texture);
  background-blend-mode: multiply;
  background-size: cover;
  background-position: center;
}

/* colored panels keep their hue but gain grain (soft-light) */
.paper-ink {
  background-color: var(--ark-charcoal);
  background-image: var(--paper-texture);
  background-blend-mode: soft-light;
  background-size: cover;
}
.paper-brand {
  background-color: var(--ark-maroon);
  background-image: var(--paper-texture);
  background-blend-mode: soft-light;
  background-size: cover;
}
.paper-slate {
  background-color: var(--ark-slate);
  background-image: var(--paper-texture);
  background-blend-mode: soft-light;
  background-size: cover;
}

/* a torn/deckle bottom edge you can drop on bars & footers */
.paper-edge-bottom {
  -webkit-mask: radial-gradient(circle at 6px 0, transparent 0 5px, #000 6px) repeat-x left bottom / 12px 8px;
          mask: radial-gradient(circle at 6px 0, transparent 0 5px, #000 6px) repeat-x left bottom / 12px 8px;
}