/* =====================================================================
   OSE · layout primitives (container, section, stack, cluster, grid).
   Uses SEMANTIC tokens only. Private knobs use the --_ prefix and are
   always set from tokens, never from raw values.
   ===================================================================== */

@layer base {
  .container {
    inline-size: min(var(--layout-max), 100% - var(--layout-gutter) - var(--layout-gutter));
    margin-inline: auto;
  }

  .container--wide {
    inline-size: min(var(--layout-wide), 100% - var(--layout-gutter) - var(--layout-gutter));
  }

  .container--narrow {
    inline-size: min(var(--layout-narrow), 100% - var(--layout-gutter) - var(--layout-gutter));
  }

  .container--prose {
    inline-size: min(var(--layout-prose), 100% - var(--layout-gutter) - var(--layout-gutter));
  }

  .section {
    padding-block: var(--space-section);
  }

  .section--tight {
    padding-block: var(--space-section-tight);
  }

  .stack {
    --_gap: var(--space-stack-md);
    display: flex;
    flex-direction: column;
    gap: var(--_gap);
  }

  .stack--xs { --_gap: var(--space-stack-xs); }
  .stack--sm { --_gap: var(--space-stack-sm); }
  .stack--lg { --_gap: var(--space-stack-lg); }
  .stack--xl { --_gap: var(--space-stack-xl); }

  .cluster {
    --_gap: var(--space-inline-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--_gap);
  }

  .cluster--xs { --_gap: var(--space-inline-xs); }
  .cluster--md { --_gap: var(--space-inline-md); }
  .cluster--lg { --_gap: var(--space-inline-lg); }

  .grid-auto {
    display: grid;
    gap: var(--layout-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(var(--layout-card-min), 100%), 1fr));
  }
}