/* ============================================================
   LOCA v2_gradient_editorial · spacing.css
   Layout widths, spacing scale, dark-block rules · 2026-05-17

   PRINCIPLE
     The layout relies on negative space, editorial column width,
     and scale contrast — not on visual effects. Pages should feel
     calm, established, and material-rich, not dense.
   ============================================================ */

:root {
  /* ---------- EDITORIAL CONTENT WIDTHS ----------
     Hero column stays narrow so it reads as an editorial opening
     statement, NOT a startup landing page. Body content sits in
     a slightly wider editorial measure. Visual sections may use
     the full wide grid. */
  --lo-width-hero:    720px;   /* range 680–760 — hero / manifesto / quote */
  --lo-width-content: 960px;   /* range 880–1040 — body / product reading */
  --lo-width-wide:   1200px;   /* range 1120–1280 — visual / grid / image rows */
}

:root {
  /* ---------- SPACING SCALE ----------
     Use these for every margin / padding / gap. The scale is
     deliberately calm — no 6px nor 10px. Force vertical rhythm
     to live on this ladder so the page breathes. */
  --lo-space-xs:    4px;
  --lo-space-sm:    8px;
  --lo-space-md:   16px;
  --lo-space-lg:   24px;
  --lo-space-xl:   48px;
  --lo-space-2xl:  80px;
  --lo-space-3xl: 128px;
}

:root {
  /* ---------- DERIVED VERTICAL RHYTHM ----------
     Section padding standards. Pages compose by stacking these. */
  --lo-section-pad-y:        var(--lo-space-3xl); /* between major sections */
  --lo-section-pad-y-tight:  var(--lo-space-2xl); /* within a section */
  --lo-card-pad:             var(--lo-space-lg);  /* card internal padding base */
  --lo-card-pad-y:           28px;                /* slightly looser vertical */
}

/* ---------- REUSABLE LAYOUT WRAPPERS ----------
   Use .lo-hero, .lo-content, .lo-wide on a wrapping element to
   apply the standard widths + centering. Pair with section padding. */
.lo-hero    { max-width: var(--lo-width-hero);    margin: 0 auto; padding: 0 var(--lo-space-lg); }
.lo-content { max-width: var(--lo-width-content); margin: 0 auto; padding: 0 var(--lo-space-lg); }
.lo-wide    { max-width: var(--lo-width-wide);    margin: 0 auto; padding: 0 var(--lo-space-lg); }

.lo-section            { padding: var(--lo-section-pad-y) 0; }
.lo-section--tight     { padding: var(--lo-section-pad-y-tight) 0; }

/* ---------- HAIRLINE DIVIDER ----------
   Editorial separator. Use sparingly between content blocks
   within a card or between paragraphs in a manifesto. */
.lo-hairline {
  border: none;
  border-top: 0.5px solid var(--lo-border-hairline);
  margin: var(--lo-space-lg) 0;
}

/* ---------- DARK BLOCK ----------
   Editorial pause / pull-quote / manifesto moment.

   USAGE RULES — strict:
   - Maximum 0–1 dark block per page.
   - Allowed contexts ONLY:
       · manifesto pull-quote
       · philosophy / brand statement
       · "One craft. One roof. One supplier." moment
   - FORBIDDEN contexts:
       · product specs · product grids · feature blocks
       · FAQ · pricing · forms · navigation · footer copy
   - Background: var(--lo-bg-dark) — never pure black.
   - Pair with .lo-on-dark on the wrapper so descendants inherit
     readable cream text via typography.css.                       */
.lo-dark-block {
  background: var(--lo-bg-dark);
  color: var(--lo-bg-dark-text);
  padding: var(--lo-space-2xl) var(--lo-space-xl);
  /* no border-radius — editorial blocks read as architecture, not UI */
}