/* ============================================================================
   primitives.css — neutral layout/spacing/sizing/type layer (ADR-0008 Phase 1)
   ----------------------------------------------------------------------------
   The ACSS-INDEPENDENT layout layer. Consumes ONLY tokens.css custom
   properties. CSS-native (Grid/Flexbox/clamp/logical-properties). No ACSS,
   no Tailwind, no framework. This is what replaces renting ACSS utilities for
   spacing, sizing, and layout — works identically on Bricks, Astro, raw HTML.

   Prefix: `l-` = layout primitive · `t-` = type primitive · `u-` = utility.
   Every-Layout-style composable primitives over per-element manual values.
   ============================================================================ */

/* ---- element baseline (minimal; not a full reset) ----------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font-body); color: var(--text);
  background: var(--surface); line-height: var(--body-line-height);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { font-family: var(--font-heading); line-height: var(--heading-line-height); color: var(--heading-color); margin: 0; text-wrap: balance; }
p { margin: 0; max-width: var(--measure); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); }

/* ---- CONTAINER: max width + gutters, centred --------------------------- */
.l-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.l-container--narrow { max-width: var(--measure); }
.l-container--wide { max-width: var(--bp-xxl); }

/* ---- SECTION: vertical block rhythm ------------------------------------ */
.l-section { padding-block: var(--section-space); }
.l-section--sm { padding-block: calc(var(--section-space) * .6); }
.l-section--alt { background: var(--surface-2); }
.l-section--ink { background: var(--base); color: var(--on-ink); }
.l-section--ink h1, .l-section--ink h2, .l-section--ink h3 { color: var(--white); }

/* ---- FLOW: consistent vertical rhythm between children (owl selector) --- */
.l-flow > * + * { margin-block-start: var(--flow-space, var(--space-m)); }
.l-flow--tight { --flow-space: var(--space-s); }
.l-flow--loose { --flow-space: var(--space-l); }

/* ---- STACK: explicit vertical group ------------------------------------ */
.l-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-m)); }

/* ---- CLUSTER: inline wrapping group (button rows, stat rows, meta) ------ */
.l-cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, var(--space-s)); align-items: var(--cluster-align, center); }
.l-cluster--between { justify-content: space-between; }

/* ---- GRID: responsive without media queries ---------------------------- */
.l-grid { display: grid; gap: var(--grid-gap, var(--space-m)); }
.l-grid--auto  { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); }
.l-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.l-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.l-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ---- SWITCHER: row that flips to column under a threshold (no MQ) ------- */
.l-switcher { display: flex; flex-wrap: wrap; gap: var(--space-l); }
.l-switcher > * { flex: 1 1 var(--switcher-min, 28rem); }

/* ---- CENTER: place a single child / center content --------------------- */
.l-center { display: grid; place-items: center; text-align: center; }

/* ---- TYPE primitives (size from tokens; no ACSS type utilities) -------- */
.t-display { font-family: var(--font-heading); font-size: var(--text-display); font-weight: 800; letter-spacing: -.02em; }
.t-xl { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; }
.t-l  { font-size: var(--text-l); line-height: 1.4; }
.t-m  { font-size: var(--text-m); }
.t-s  { font-size: var(--text-s); }
.t-eyebrow { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--primary); }
.t-lede { font-size: var(--text-l); line-height: 1.5; color: var(--text-muted); }

/* ---- small utilities --------------------------------------------------- */
.u-measure { max-width: var(--measure); }
.u-muted { color: var(--text-muted); }
.u-accent { color: var(--accent); }
.u-center-text { text-align: center; margin-inline: auto; }
.u-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- ACCESSIBILITY (a11y baseline; token-driven) ----------------------- */
/* Visible keyboard focus on every interactive element. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}
/* Skip-to-content link — hidden until focused. */
.u-skip-link {
  position: absolute; left: var(--space-s); top: var(--space-s); z-index: 100;
  background: var(--primary); color: var(--white); text-decoration: none;
  padding: .6em 1em; border-radius: var(--radius-s);
  transform: translateY(-150%); transition: transform .2s var(--ease);
}
.u-skip-link:focus { transform: translateY(0); }

/* Honour reduced-motion globally (any consumer's transitions/animations). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}