/* 4 framework recipes. Applied via [data-framework="..."] in the
   ThemeShell component. Sit in @layer framework so they win over @layer
   section but lose to @layer theme. */

@layer framework {
  /* uniform — every section uses --bg. No-op. */
  [data-framework="uniform"] > .slot { --section-bg: var(--bg); }

  /* alternating — odd sections --bg, even sections --bg-mid. */
  [data-framework="alternating"] > .slot:nth-of-type(odd) { --section-bg: var(--bg); }
  [data-framework="alternating"] > .slot:nth-of-type(even) { --section-bg: var(--bg-mid); }

  /* accent-bands — most sections --bg; trust + pricing + consult get accent. */
  [data-framework="accent-bands"] > .slot { --section-bg: var(--bg); }
  [data-framework="accent-bands"] > .slot[data-section="trust"],
  [data-framework="accent-bands"] > .slot[data-section="pricing"],
  [data-framework="accent-bands"] > .slot[data-section="consult"] {
    --section-bg: var(--bg-mid);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  /* layered — every section gets a subtle drop shadow on its top edge,
     visually floating each section over the prior one. */
  [data-framework="layered"] > .slot { --section-bg: var(--bg); }
  [data-framework="layered"] > .slot + .slot {
    box-shadow: 0 -12px 24px -16px rgba(0, 0, 0, 0.55);
    position: relative;
    z-index: 0;
  }
}