/* system.css — opt-in base layer + utilities for Develop surfaces.
 *
 * Wrapped in @layer lib.reset so a consumer's own base layer and
 * Tailwind's preflight deterministically WIN during the gradual
 * de-Tailwind overlap (a later @layer / unlayered rule beats this one).
 *
 * Deliberately MINIMAL: box-sizing, heading/p margin reset, the
 * custom-element placeholders, and a few layout utilities. It does NOT
 * touch overflow-x, scrollbar theming, or focus outline — those are
 * each consumer app's decision, not a shared concern.
 */

@layer lib.reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    letter-spacing: -0.025em;
    line-height: var(--leading-tight);
  }

  p {
    margin: 0;
    line-height: var(--leading-normal);
  }

  /* Graceful degradation + CLS fix: before components.js upgrades the
   * custom elements they are display:inline at 0px. Reserve their box
   * and paint a token-coloured surface so a cold first load (or a lib
   * outage on a consumer that hasn't kept its vendored copy) shows a
   * styled placeholder instead of a collapsed, invisible chrome.
   *
   * Heights track dev-site-header's declared 48px / 56px. The footer
   * value is a conservative reserve; confirm with getComputedStyle at
   * the A2/A3 pixel-verification step. */
  dev-site-header:not(:defined) {
    display: block;
    min-height: 48px;
    background: var(--background);
    border-bottom: 1px solid var(--border);
  }
  dev-site-footer:not(:defined) {
    display: block;
    min-height: 120px;
    background: var(--background);
    border-top: 1px solid var(--border);
  }
  @media (min-width: 768px) {
    dev-site-header:not(:defined) {
      min-height: 56px;
    }
  }
}

@layer lib.utilities {
  /* Vertical rhythm — children stacked with a token gap. */
  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, 1rem);
  }
  /* Horizontal grouping that wraps. */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, 0.5rem);
  }
  /* Centered, width-capped content column. */
  .center {
    margin-inline: auto;
    max-width: var(--center-max, 72rem);
    padding-inline: var(--center-pad, 1.5rem);
  }
  .text-balance {
    text-wrap: balance;
  }
}