/* ==========================================================================
   PAPER TEXTURE — Subtle paper background
   Procedurally generated using SVG feTurbulence + feDiffuseLighting.

   Usage: Add class "paper-bg" to any section or container.
   Fallback: Flat #fafafa for browsers without SVG filter support.
   ========================================================================== */

.paper-bg {
  position: relative;
  background-color: #fafafa;
}

.paper-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='3' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='0.8'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 500px 500px;
}

.paper-bg > * {
  position: relative;
  z-index: 1;
}

/* Dark theme: disable paper texture */
[data-theme="dark"] .paper-bg {
  background-color: var(--bg-primary);
}

[data-theme="dark"] .paper-bg::before {
  display: none;
}