/* ══════════════════════════════════════════════════════════════════
   BossOS Factory — Spacing & Layout Tokens
   Source of truth for vertical + horizontal rhythm across every surface
   (glowos/eventdesk · bossospro · lisamlum · routewiz · namebadgeit · bvvi).

   Brand-NEUTRAL by design: this file owns spacing, layout primitives, radii,
   and motion only. Colors, fonts, and type scale stay per-surface.

   Convention: the --s-* step scale already used by eventdesk-*.css and
   lisamlum/ads/colors_and_type.css. Do NOT introduce a competing --space-*
   or --gap-* scale — extend this one.

   Usage:  <link rel="stylesheet" href="/shared/tokens.css">
   Then:   only --s-* values for layout gaps, never raw px.
   Layout: .stack (vertical) · .cluster / .grid-auto (horizontal) · .container
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing step scale (4px base rhythm) ───────────────────────── */
  --s-0:    0;
  --s-1:    4px;
  --s-2:    8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-14:  56px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;
  --s-30: 120px;   /* large section padding (desktop) */
  --s-40: 160px;

  /* ── Layout constraints (surfaces may override) ─────────────────── */
  --container:      1180px;   /* app/product default; lisamlum overrides to 1400 */
  --container-text:  720px;   /* prose / reading column */
  --gutter:           24px;   /* page side padding, mobile-safe default */
  --gutter-lg:        60px;   /* editorial side padding, desktop */

  /* ── Section rhythm (vertical breathing between page blocks) ────── */
  --section-y:    var(--s-20);   /* default top/bottom section padding */
  --section-y-lg: var(--s-30);   /* hero / marquee sections */

  /* ── Default flow gap for .stack ────────────────────────────────── */
  --flow: var(--s-4);

  /* ── Radii (neutral; surfaces lean flatter or rounder as needed) ── */
  --r-sm:     4px;
  --r-md:     6px;
  --r-lg:     8px;
  --r-xl:    16px;
  --r-round: 999px;
}

/* ══════════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   Opt-in classes. They only affect elements you add them to, so adding
   this file to a surface never reflows existing markup until you use them.
   ══════════════════════════════════════════════════════════════════ */

/* STACK — vertical rhythm. Spaces direct children with ONE owned margin.
   Override per-instance with --flow (inline or a modifier class).
   Kills the "every element sets its own margin-bottom" chaos. */
.stack > * { margin-block: 0; }
.stack > * + * { margin-block-start: var(--flow, var(--s-4)); }

.stack-2  { --flow: var(--s-2); }
.stack-3  { --flow: var(--s-3); }
.stack-4  { --flow: var(--s-4); }
.stack-6  { --flow: var(--s-6); }
.stack-8  { --flow: var(--s-8); }
.stack-12 { --flow: var(--s-12); }

/* CLUSTER — horizontal grouping that wraps. For nav items, button rows,
   tag/chip lists, inline meta. Replaces ad-hoc flex + margin hacks. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--s-3));
  align-items: var(--cluster-align, center);
}
.cluster-2 { --cluster-gap: var(--s-2); }
.cluster-4 { --cluster-gap: var(--s-4); }
.cluster-6 { --cluster-gap: var(--s-6); }

/* GRID-AUTO — responsive card grid with no media queries. Cards reflow
   from N columns down to 1 based on a minimum item width. */
.grid-auto {
  display: grid;
  gap: var(--grid-gap, var(--s-6));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--grid-min, 18rem)), 1fr)
  );
}

/* CONTAINER — centered, max-width, gutter-padded page wrapper. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-text { max-width: var(--container-text); }
@media (min-width: 768px) {
  .container { padding-inline: var(--gutter-lg); }
}

/* SECTION — consistent vertical padding for top-level page blocks. */
.section    { padding-block: var(--section-y); }
.section-lg { padding-block: var(--section-y-lg); }

/* CENTER — center a fixed-measure block (e.g. centered prose/CTA). */
.center {
  box-sizing: content-box;
  max-width: var(--measure, var(--container-text));
  margin-inline: auto;
}