/* =============================================================================
   EHCKK Design System — Utilities
   Small set of layout/spacing helpers. No Tailwind required.
   ============================================================================= */

/* Layout primitives */
.stack       { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm    { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg    { display: flex; flex-direction: column; gap: var(--space-8); }
.cluster     { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.row         { display: flex; gap: var(--space-4); align-items: center; }
.row-between { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; }
.center      { display: flex; align-items: center; justify-content: center; }

.container       { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-6); }
.container-sm    { width: 100%; max-width: var(--container-md); margin-inline: auto; padding-inline: var(--space-6); }
.container-wide  { width: 100%; max-width: var(--container-2xl); margin-inline: auto; padding-inline: var(--space-6); }

/* Grid presets */
.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-roster { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Spacing utilities (subset) */
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mt-12 { margin-top: var(--space-12); }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } .mb-12 { margin-bottom: var(--space-12); }
.p-0 { padding: 0; } .p-2 { padding: var(--space-2); } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); }
.py-4 { padding-block: var(--space-4); } .py-8 { padding-block: var(--space-8); } .py-12 { padding-block: var(--space-12); } .py-16 { padding-block: var(--space-16); }
.px-4 { padding-inline: var(--space-4); } .px-6 { padding-inline: var(--space-6); }

/* Text */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-left    { text-align: left; }
.text-display { font-family: var(--font-display); font-size: var(--text-display); line-height: var(--leading-display); text-transform: uppercase; letter-spacing: var(--tracking-tight); }
.text-h1 { font-family: var(--font-display); font-size: var(--text-h1); line-height: var(--leading-tight); text-transform: uppercase; }
.text-h2 { font-family: var(--font-display); font-size: var(--text-h2); line-height: var(--leading-tight); text-transform: uppercase; }
.text-h3 { font-family: var(--font-display); font-size: var(--text-h3); line-height: var(--leading-tight); text-transform: uppercase; }
.text-h4 { font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--leading-snug); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.text-body-lg  { font-size: var(--text-body-lg); }
.text-body-sm  { font-size: var(--text-body-sm); }
.text-caption  { font-size: var(--text-caption); color: var(--color-fg-muted); }
.text-overline { font-size: var(--text-overline); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--color-fg-muted); }

.text-fg          { color: var(--color-fg); }
.text-muted       { color: var(--color-fg-muted); }
.text-primary     { color: var(--color-primary); }
.text-accent      { color: var(--color-accent); }
.text-on-primary  { color: var(--color-fg-on-primary); }

/* Background helpers */
.bg-bg            { background: var(--color-bg); }
.bg-elevated      { background: var(--color-bg-elevated); }
.bg-card          { background: var(--color-card); }
.bg-muted         { background: var(--color-muted); }
.bg-primary       { background: var(--color-primary); color: var(--color-fg-on-primary); }
.bg-accent        { background: var(--color-accent);  color: var(--color-fg-on-accent); }
.bg-stadium       { background: var(--gradient-stadium); color: var(--ehckk-white); }
.bg-ice           { background: var(--gradient-ice); }

/* Borders */
.border           { border: 1px solid var(--color-border); }
.border-strong    { border: 2px solid var(--color-border-strong); }
.rounded-none     { border-radius: var(--radius-none); }
.rounded-sm       { border-radius: var(--radius-sm); }
.rounded-md       { border-radius: var(--radius-md); }
.rounded-lg       { border-radius: var(--radius-lg); }

/* Misc */
.shadow-puck     { box-shadow: var(--shadow-puck); }
.shadow-elevated { box-shadow: var(--shadow-elevated); }
.full-width      { width: 100%; }
.uppercase       { text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.tracking-wide   { letter-spacing: var(--tracking-wider); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}