/* ────────────────────────────────────────────────────────────────
   DΛREΛKT_ UI — MODULE: ui.section.body
   Classification : Layout Section | JSON-driven | Genesis Safe
   Version        : 2.1.0 | Edge-Token-Aware • DOM-Return-Guaranteed
   File           : /tools/modules/ui.section.body/ui.section.body.css
   Maintainer     : DΛREΛKT_ UI TEAM

   ARCHITECTURE:
   Root (.ui-section-body) = full-width background container.
     → padding-block for vertical spacing
     → NO padding-inline (background must go edge-to-edge)

   Inner (.ui-section-body__inner) = content constraint container.
     → padding-inline via --edge token (site controls the value)
     → optional max-width + centering via data-width="content"
     → NO responsive scaling here — sites set --edge at breakpoints

   Token chain:  --edge  →  --ui-sec-body-padX  →  24px (hardcoded fallback)
   Sites ONLY need to set --edge. Everything responds automatically.
   ──────────────────────────────────────────────────────────────── */

@layer ui.section.body {

  /* ─── Root: full-width background container ──────────────────── */
  .ui-section-body[data-module="ui.section.body"] {
    box-sizing: border-box;
    width: 100%;
    background: var(--ui-sec-body-bg, var(--site-bg));
    color: var(--ui-sec-body-fg, var(--site-fg));
    padding-block: var(--ui-sec-body-padY, 48px);
    padding-inline: 0;
    margin: 0;
  }

  /* ─── Inner: content container with edge padding ─────────────── */
  .ui-section-body__inner {
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--edge, var(--ui-sec-body-padX, 24px));
  }

  /* ─── Opt-in: constrained content width ──────────────────────── */
  .ui-section-body[data-width="content"] .ui-section-body__inner {
    max-width: var(--ui-body-max, 1200px);
    margin-inline: auto;
  }

  /* ─── Opt-in: full-bleed (no padding, no constraint) ─────────── */
  .ui-section-body[data-width="bleed"] .ui-section-body__inner {
    padding-inline: 0;
    margin-inline: 0;
    max-width: none;
  }
}