/* ============================================================
   XC Gradient — Texture & surface helpers
   The brand ground is warm kraft PAPER with a fine grain. Grain is
   produced with an inline SVG turbulence filter (no image files) so
   it ships anywhere. Apply sparingly — full-bleed grounds, hero
   sections, cover slides. Not on dense data UI.
   ============================================================ */

:root {
  /* Fine paper grain as a tiling data-URI. Low alpha; multiply-friendly. */
  --grain-fine: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>"); /* @kind other */
  --grain-coarse: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.6'/></svg>"); /* @kind other */
}

/* Paper ground with grain. Compose behind content. */
.xc-paper {
  background-color: var(--paper-1);
  background-image: var(--grain-fine);
  background-blend-mode: multiply;
  background-size: 140px 140px;
}
.xc-paper--kraft {
  background-color: var(--paper-0);
  background-image: var(--grain-coarse);
  background-blend-mode: multiply;
  background-size: 200px 200px;
}
.xc-paper--ink {
  background-color: var(--ink-0);
  color: var(--ink-on-dark);
  background-image: var(--grain-coarse);
  background-blend-mode: soft-light;
  background-size: 200px 200px;
}

/* A hairline "printed rule" — used as section dividers. */
.xc-rule {
  border: none;
  border-top: 1px solid var(--line-2);
}

/* Grain-only overlay layer: position:absolute + inset:0 on top of imagery. */
.xc-grain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain-coarse);
  background-size: 200px 200px;
  mix-blend-mode: multiply;
  opacity: 0.5;
}