/* ──────────────────────────────────────────────
 * Trustcast Gradient Layer — iter-10
 *
 * Gradients are CONTEXTUAL transitions between adjacent
 * sections, never decorative fills. One utility class per
 * boundary recipe defined in tokens.css.
 *
 * Authoring (manual):
 *   <section class="block surface-paper">…</section>
 *   <div class="seam seam-paper-to-mist" aria-hidden="true"></div>
 *   <section class="block surface-mist">…</section>
 *
 * Authoring (auto, via [data-auto-seams] on the page root):
 *   <main data-auto-seams>
 *     <section class="block surface-paper">…</section>
 *     <section class="block surface-mist">…</section>
 *     <!-- a 12-line helper inserts the matching .seam-X-to-Y between them -->
 *   </main>
 * Helper lives in BaseLayout.astro:
 *   document.querySelectorAll('[data-auto-seams]').forEach(root => {
 *     const sections = [...root.querySelectorAll(':scope > section.block')];
 *     for (let i = 0; i < sections.length - 1; i++) {
 *       const a = surfaceOf(sections[i]);
 *       const b = surfaceOf(sections[i + 1]);
 *       if (!a || !b || a === b) continue;
 *       const seam = document.createElement('div');
 *       seam.className = `seam seam-${a}-to-${b}`;
 *       seam.setAttribute('aria-hidden', 'true');
 *       sections[i].after(seam);
 *     }
 *   });
 *   function surfaceOf(el) {
 *     const m = [...el.classList].find(c => c.startsWith('surface-'));
 *     return m ? m.replace('surface-', '') : null;
 *   }
 *
 * No box-shadow. No noise. No filter.
 * ────────────────────────────────────────────── */

/* Surface anchors — semantic backgrounds for sections */
.surface-paper       { background: var(--paper); }
.surface-paper-deep  { background: var(--paper-deep); }
.surface-paper-plate { background: var(--paper-plate); }
.surface-mist        { background: var(--mist); }
.surface-ink         { background: var(--ink); color: var(--paper); }

/* Seam — boundary strip between two surfaces */
.seam {
  height: var(--space-9);          /* 96px */
  width: 100%;
  display: block;
  pointer-events: none;
}

.seam-paper-to-mist        { background: var(--grad-paper-to-mist); }
.seam-mist-to-paper        { background: var(--grad-mist-to-paper); }
.seam-paper-to-ink         { background: var(--grad-paper-to-ink); }
.seam-ink-to-paper         { background: var(--grad-ink-to-paper); }
.seam-paper-to-plate       { background: var(--grad-paper-to-plate); }
.seam-paper-to-paper-deep  { background: var(--grad-paper-to-paper-deep); }
.seam-paper-deep-to-mist   { background: var(--grad-paper-deep-to-mist); }
.seam-paper-deep-to-ink    { background: var(--grad-paper-deep-to-ink); }
.seam-mist-to-paper-deep   { background: var(--grad-mist-to-paper-deep); }
.seam-paper-deep-to-paper  { background: var(--grad-paper-deep-to-paper); }

/* Half-seam — 48px, for tighter rhythms */
.seam-tight { height: var(--space-7); }

/* Conditional: when prefers-reduced-data is on, collapse seams to a 1px Mist hairline */
@media (prefers-reduced-data: reduce) {
  .seam {
    height: 1px;
    background: var(--mist-rule) !important;
  }
}