/* ==========================================================================
   ServiceLine — Material Surface Foundation
   --------------------------------------------------------------------------
   Reusable surface classes for the four core materials from the Visual
   Foundation, plus a subtle, opt-in grain overlay. General-purpose system
   only — NOT the final hero material, NOT a WebGL material.
   ========================================================================== */

.surface-obsidian {
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

.surface-charcoal {
  background-color: var(--surface-secondary);
  color: var(--text-primary);
}

.surface-concrete {
  background-color: var(--surface-material);
  color: var(--text-primary);
}

.surface-light {
  background-color: var(--surface-light);
  color: var(--text-on-light);
}

/* ---- Grain overlay ---------------------------------------------------------
   Subtle material noise via an inline SVG turbulence filter — no image
   asset required. Deliberately low-opacity: this is atmosphere, not
   texture-for-its-own-sake, and it is opt-in per surface rather than
   applied globally. Add alongside any surface-* class:

     <div class="surface-obsidian has-grain">...</div>
*/

.has-grain {
  position: relative;
  isolation: isolate;
}

.has-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}