/* KineticPep — utility classes (atomic helpers) */

.flex            { display: flex; }
.flex-col        { display: flex; flex-direction: column; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }

.gap-1  { gap: 4px;  }
.gap-2  { gap: 8px;  }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-5  { gap: 20px; }
.gap-6  { gap: 24px; }
.gap-8  { gap: 32px; }
.gap-10 { gap: 40px; }
.gap-12 { gap: 48px; }
.gap-16 { gap: 64px; }

.grid       { display: grid; }
.grid-2     { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid-3     { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid-4     { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}

.muted     { color: var(--ink-muted); }
.secondary { color: var(--ink-secondary); }
.primary   { color: var(--ink-primary); }
.accent    { color: var(--accent-cyan); }

.bg-elevated { background: var(--bg-elevated); }
.bg-primary  { background: var(--bg-primary); }
.bg-dark     { background: #0B1F3A; color: #fff; }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.mt-2 { margin-top: 8px; }   .mt-4 { margin-top: 16px; }   .mt-6 { margin-top: 24px; }   .mt-8 { margin-top: 32px; }   .mt-12 { margin-top: 48px; }   .mt-16 { margin-top: 64px; }
.mb-2 { margin-bottom: 8px;} .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } .mb-12 { margin-bottom: 48px; } .mb-16 { margin-bottom: 64px; }
.p-4 { padding: 16px; } .p-6 { padding: 24px; } .p-8 { padding: 32px; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-full{ border-radius: 999px; }

.border        { border: 1px solid var(--border-subtle); }
.border-strong { border: 1px solid var(--border-strong); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

.uppercase { text-transform: uppercase; }
.tracking-wide  { letter-spacing: 0.06em; }
.tracking-wider { letter-spacing: 0.1em; }
.tracking-tight { letter-spacing: -0.02em; }