/* ═══════════════════════════════════════════════════════════════════════════
 * Kallisto Design System — Utility Classes
 * k- prefix to avoid collision with kal- component namespace.
 * Every value maps to a design-system token — no hardcoded numbers.
 * Loaded after polish-v4.css, before app-specific stylesheets.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Layout ───────────────────────────────────────────────────────────────── */
.k-flex           { display: flex; }
.k-flex-col       { display: flex; flex-direction: column; }
.k-inline-flex    { display: inline-flex; }
.k-grid           { display: grid; }
.k-items-center   { align-items: center; }
.k-items-start    { align-items: flex-start; }
.k-items-end      { align-items: flex-end; }
.k-items-stretch  { align-items: stretch; }
.k-justify-between{ justify-content: space-between; }
.k-justify-center { justify-content: center; }
.k-justify-end    { justify-content: flex-end; }
.k-flex-1         { flex: 1; }
.k-flex-shrink-0  { flex-shrink: 0; }
.k-flex-wrap      { flex-wrap: wrap; }
.k-min-w-0        { min-width: 0; }
.k-w-full         { width: 100%; }
.k-h-full         { height: 100%; }

/* ── Gap ──────────────────────────────────────────────────────────────────── */
.k-gap-0  { gap: var(--space-0); }
.k-gap-1  { gap: var(--space-1); }
.k-gap-2  { gap: var(--space-2); }
.k-gap-3  { gap: var(--space-3); }
.k-gap-4  { gap: var(--space-4); }
.k-gap-5  { gap: var(--space-5); }
.k-gap-6  { gap: var(--space-6); }
.k-gap-7  { gap: var(--space-7); }
.k-gap-8  { gap: var(--space-8); }
.k-gap-9  { gap: var(--space-9); }
.k-gap-10 { gap: var(--space-10); }

/* ── Padding ──────────────────────────────────────────────────────────────── */
.k-p-0  { padding: var(--space-0); }
.k-p-1  { padding: var(--space-1); }
.k-p-2  { padding: var(--space-2); }
.k-p-3  { padding: var(--space-3); }
.k-p-4  { padding: var(--space-4); }
.k-p-5  { padding: var(--space-5); }
.k-p-6  { padding: var(--space-6); }
.k-p-7  { padding: var(--space-7); }
.k-p-8  { padding: var(--space-8); }
.k-p-9  { padding: var(--space-9); }
.k-p-10 { padding: var(--space-10); }

.k-px-2 { padding-inline: var(--space-2); }
.k-px-3 { padding-inline: var(--space-3); }
.k-px-4 { padding-inline: var(--space-4); }
.k-px-5 { padding-inline: var(--space-5); }
.k-px-6 { padding-inline: var(--space-6); }
.k-px-7 { padding-inline: var(--space-7); }
.k-px-8 { padding-inline: var(--space-8); }

.k-py-1 { padding-block: var(--space-1); }
.k-py-2 { padding-block: var(--space-2); }
.k-py-3 { padding-block: var(--space-3); }
.k-py-4 { padding-block: var(--space-4); }
.k-py-5 { padding-block: var(--space-5); }
.k-py-6 { padding-block: var(--space-6); }
.k-py-7 { padding-block: var(--space-7); }
.k-py-8 { padding-block: var(--space-8); }

/* ── Margin ───────────────────────────────────────────────────────────────── */
.k-m-0   { margin: var(--space-0); }
.k-m-auto{ margin: auto; }

.k-mt-1  { margin-top: var(--space-1); }
.k-mt-2  { margin-top: var(--space-2); }
.k-mt-3  { margin-top: var(--space-3); }
.k-mt-4  { margin-top: var(--space-4); }
.k-mt-5  { margin-top: var(--space-5); }
.k-mt-6  { margin-top: var(--space-6); }
.k-mt-7  { margin-top: var(--space-7); }
.k-mt-8  { margin-top: var(--space-8); }

.k-mb-1  { margin-bottom: var(--space-1); }
.k-mb-2  { margin-bottom: var(--space-2); }
.k-mb-3  { margin-bottom: var(--space-3); }
.k-mb-4  { margin-bottom: var(--space-4); }
.k-mb-5  { margin-bottom: var(--space-5); }
.k-mb-6  { margin-bottom: var(--space-6); }
.k-mb-7  { margin-bottom: var(--space-7); }
.k-mb-8  { margin-bottom: var(--space-8); }

.k-ml-1  { margin-left: var(--space-1); }
.k-ml-2  { margin-left: var(--space-2); }
.k-ml-3  { margin-left: var(--space-3); }
.k-ml-4  { margin-left: var(--space-4); }
.k-ml-auto { margin-left: auto; }

.k-mr-1  { margin-right: var(--space-1); }
.k-mr-2  { margin-right: var(--space-2); }
.k-mr-3  { margin-right: var(--space-3); }
.k-mr-4  { margin-right: var(--space-4); }
.k-mr-auto { margin-right: auto; }

/* ── Typography ───────────────────────────────────────────────────────────── */
.k-text-xs  { font-size: var(--fs-xs); }
.k-text-sm  { font-size: var(--fs-sm); }
.k-text-base{ font-size: var(--fs-base); }
.k-text-md  { font-size: var(--fs-md); }
.k-text-lg  { font-size: var(--fs-lg); }
.k-text-xl  { font-size: var(--fs-xl); }
.k-text-2xl { font-size: var(--fs-2xl); }
.k-text-3xl { font-size: var(--fs-3xl); }

.k-font-regular { font-weight: var(--fw-regular); }
.k-font-medium  { font-weight: var(--fw-medium); }
.k-font-semi    { font-weight: var(--fw-semi); }
.k-font-bold    { font-weight: var(--fw-bold); }
.k-font-black   { font-weight: var(--fw-black); }

.k-mono { font-family: var(--font-mono); }
.k-sans { font-family: var(--font-sans); }

.k-uppercase    { text-transform: uppercase; }
.k-capitalize   { text-transform: capitalize; }
.k-tracking-tight  { letter-spacing: var(--ls-tight); }
.k-tracking-normal { letter-spacing: var(--ls-normal); }
.k-tracking-wide   { letter-spacing: var(--ls-wide); }
.k-tracking-wider  { letter-spacing: var(--ls-wider); }

.k-leading-tight  { line-height: var(--lh-tight); }
.k-leading-normal { line-height: var(--lh-normal); }
.k-leading-loose  { line-height: var(--lh-loose); }

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

/* ── Color ────────────────────────────────────────────────────────────────── */
.k-ink    { color: var(--ink); }
.k-ink-2  { color: var(--ink-2); }
.k-ink-3  { color: var(--ink-3); }
.k-violet { color: var(--violet); }
.k-sky    { color: var(--sky); }
.k-mint   { color: var(--mint); }
.k-ok     { color: var(--ok); }
.k-warn   { color: var(--warn); }
.k-bad    { color: var(--bad); }
.k-white  { color: var(--white); }

/* ── Background ───────────────────────────────────────────────────────────── */
.k-bg-1       { background: var(--bg-1); }
.k-bg-2       { background: var(--bg-2); }
.k-bg-3       { background: var(--bg-3); }
.k-bg-glass   { background: var(--glass-bg); }
.k-bg-violet  { background: var(--violet); }
.k-bg-ok      { background: var(--ok); }
.k-bg-warn    { background: var(--warn); }
.k-bg-bad     { background: var(--bad); }

/* ── Border ───────────────────────────────────────────────────────────────── */
.k-border   { border: 1px solid var(--line); }
.k-border-b { border-bottom: 1px solid var(--line); }
.k-border-t { border-top: 1px solid var(--line); }
.k-border-l { border-left: 1px solid var(--line); }
.k-border-r { border-right: 1px solid var(--line); }
.k-border-strong   { border: 1px solid var(--line-strong); }
.k-border-0 { border: 0; }

/* ── Radius ───────────────────────────────────────────────────────────────── */
.k-rounded-xs   { border-radius: var(--r-xs); }
.k-rounded-sm   { border-radius: var(--r-sm); }
.k-rounded-md   { border-radius: var(--r-md); }
.k-rounded-lg   { border-radius: var(--r-lg); }
.k-rounded-xl   { border-radius: var(--r-xl); }
.k-rounded-full { border-radius: var(--r-full); }

/* ── Shadow ───────────────────────────────────────────────────────────────── */
.k-shadow-sm { box-shadow: var(--shadow-sm); }
.k-shadow-md { box-shadow: var(--shadow-md); }
.k-shadow-lg { box-shadow: var(--shadow-lg); }
.k-shadow-0  { box-shadow: none; }

/* ── Overflow ─────────────────────────────────────────────────────────────── */
.k-overflow-auto    { overflow: auto; }
.k-overflow-hidden  { overflow: hidden; }
.k-overflow-x-auto  { overflow-x: auto; }
.k-overflow-y-auto  { overflow-y: auto; }

/* ── Position ─────────────────────────────────────────────────────────────── */
.k-relative { position: relative; }
.k-absolute { position: absolute; }
.k-fixed    { position: fixed; }
.k-sticky   { position: sticky; }
.k-inset-0  { inset: 0; }

/* ── Z-Index ──────────────────────────────────────────────────────────────── */
.k-z-0  { z-index: 0; }
.k-z-1  { z-index: 1; }
.k-z-2  { z-index: 2; }
.k-z-5  { z-index: 5; }
.k-z-10 { z-index: 10; }
.k-z-50 { z-index: 50; }

/* ── Misc ─────────────────────────────────────────────────────────────────── */
.k-truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-nowrap         { white-space: nowrap; }
.k-break-words    { overflow-wrap: break-word; }
.k-cursor-pointer { cursor: pointer; }
.k-cursor-default { cursor: default; }
.k-select-none    { user-select: none; }
.k-pointer-events-none { pointer-events: none; }
.k-sr-only        { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.k-tabular-nums   { font-variant-numeric: tabular-nums; }

/* ── Visibility ───────────────────────────────────────────────────────────── */
.k-hidden  { display: none; }
.k-visible { visibility: visible; }
.k-invisible { visibility: hidden; }

/* ── Alignment Patterns — common layout combos ───────────────────────────── */
/* Horizontal row: items centered, gap between */
.k-row {
  display: flex;
  align-items: center;
  gap: var(--row-gap-default);
}
.k-row-tight  { display: flex; align-items: center; gap: var(--row-gap-tight); }
.k-row-loose  { display: flex; align-items: center; gap: var(--row-gap-loose); }

/* Split row — left content + right actions, space-between */
.k-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--row-gap-loose);
}

/* Stack — vertical column with consistent gap */
.k-stack {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
}
.k-stack-tight { display: flex; flex-direction: column; gap: var(--row-gap-tight); }
.k-stack-loose { display: flex; flex-direction: column; gap: var(--row-gap-wide); }

/* Card inset — standard card padding */
.k-card-pad {
  padding: var(--card-pad-y) var(--card-pad-x);
}

/* Page inset — standard page padding */
.k-page-pad {
  padding: var(--page-inset);
}

/* Content container — max-width + center */
.k-container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-inset);
  box-sizing: border-box;
}

/* Section spacing */
.k-section-gap { margin-bottom: var(--section-gap); }

/* Icon + text inline — vertically centered with standard gap */
.k-icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--icon-text-gap);
}

/* Action group — button cluster */
.k-actions {
  display: flex;
  align-items: center;
  gap: var(--action-group-gap);
  flex-shrink: 0;
}

/* Center block */
.k-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Transitions ──────────────────────────────────────────────────────────── */
.k-transition-fast { transition: all var(--motion-fast) var(--ease-standard); }
.k-transition-base { transition: all var(--motion-base) var(--ease-standard); }
.k-transition-slow { transition: all var(--motion-slow) var(--ease-standard); }

@media (prefers-reduced-motion: reduce) {
  .k-transition-fast,
  .k-transition-base,
  .k-transition-slow { transition: none; }
}