/* ─────────────────────────────────────────────────────────────────────────
   Mavek utility classes — mobile-first.
   Naming follows Tailwind conventions (familiar to most devs); values come
   from variables.css tokens. Use in legacy HTML alongside semantic classes.

   Responsive prefixes: `sm:`  ≥ 480px
                        `md:`  ≥ 768px
                        `lg:`  ≥ 1024px
                        `xl:`  ≥ 1280px
   Example: <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
───────────────────────────────────────────────────────────────────────── */

/* ── Display / layout ─────────────────────────────────────────────────────── */
.block        { display: block; }
.inline       { display: inline; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.contents     { display: contents; }
.hidden       { display: none !important; }

/* ── Flex helpers ─────────────────────────────────────────────────────────── */
.flex-row        { flex-direction: row; }
.flex-col        { flex-direction: column; }
.flex-row-reverse{ flex-direction: row-reverse; }
.flex-wrap       { flex-wrap: wrap; }
.flex-nowrap     { flex-wrap: nowrap; }
.flex-1          { flex: 1; }
.flex-auto       { flex: auto; }
.flex-none       { flex: none; }
.flex-shrink-0   { flex-shrink: 0; }
.flex-grow       { flex-grow: 1; }

.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.items-baseline  { align-items: baseline; }
.items-stretch   { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

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

/* ── Grid templates ───────────────────────────────────────────────────────── */
.grid-cols-1  { grid-template-columns: repeat(1,  minmax(0, 1fr)); }
.grid-cols-2  { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
.grid-cols-3  { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
.grid-cols-4  { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
.grid-cols-5  { grid-template-columns: repeat(5,  minmax(0, 1fr)); }
.grid-cols-6  { grid-template-columns: repeat(6,  minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.col-span-2   { grid-column: span 2 / span 2; }
.col-span-3   { grid-column: span 3 / span 3; }
.col-span-4   { grid-column: span 4 / span 4; }
.col-span-full{ grid-column: 1 / -1; }

/* Auto-fit/auto-fill grids — useful for card lists */
.grid-auto-fit-md   { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-auto-fit-lg   { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-auto-fill-sm  { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

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

.px-0 { padding-left: 0; padding-right: 0; }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* Margin */
.m-0  { margin: 0; }
.m-auto { margin: auto; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ── Sizing ──────────────────────────────────────────────────────────────── */
.w-full   { width: 100%; }
.w-auto   { width: auto; }
.w-fit    { width: fit-content; }
.h-full   { height: 100%; }
.h-auto   { height: auto; }
.h-screen { height: 100vh; }

.max-w-xs   { max-width: 320px; }
.max-w-sm   { max-width: 420px; }
.max-w-md   { max-width: 520px; }
.max-w-lg   { max-width: 720px; }
.max-w-xl   { max-width: 960px; }
.max-w-2xl  { max-width: 1200px; }
.max-w-prose{ max-width: var(--content-prose); }
.max-w-none { max-width: none; }

.min-w-0    { min-width: 0; }

/* ── Typography ──────────────────────────────────────────────────────────── */
.text-xs        { font-size: var(--text-xs);    line-height: var(--lh-xs); }
.text-sm        { font-size: var(--text-sm);    line-height: var(--lh-sm); }
.text-base      { font-size: var(--text-base);  line-height: var(--lh-base); }
.text-md        { font-size: var(--text-md);    line-height: var(--lh-md); }
.text-lg        { font-size: var(--text-lg);    line-height: var(--lh-lg); }
.text-xl        { font-size: var(--text-xl);    line-height: var(--lh-xl); }
.text-2xl       { font-size: var(--text-2xl);   line-height: var(--lh-2xl); }
.text-3xl       { font-size: var(--text-3xl);   line-height: var(--lh-3xl); }
.text-4xl       { font-size: var(--text-4xl);   line-height: var(--lh-4xl); }
.text-display   { font-size: var(--text-display);line-height: var(--lh-display); font-family: var(--font-display); }

.font-regular   { font-weight: var(--fw-regular); }
.font-medium    { font-weight: var(--fw-medium); }
.font-semibold  { font-weight: var(--fw-semibold); }
.font-bold      { font-weight: var(--fw-bold); }

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

.uppercase      { text-transform: uppercase; letter-spacing: var(--ls-caps); }
.capitalize     { text-transform: capitalize; }
.italic         { font-style: italic; }
.tracking-tight { letter-spacing: var(--ls-tight); }
.tracking-wide  { letter-spacing: var(--ls-wide); }

/* Text colors */
.text-default   { color: var(--color-text); }
.text-muted     { color: var(--color-text-muted); }
.text-light     { color: var(--color-text-light); }
.text-disabled  { color: var(--color-text-disabled); }
.text-primary   { color: var(--color-primary); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }
.text-info      { color: var(--color-info); }

/* Mono */
.font-mono      { font-family: var(--font-mono); }

/* Truncation */
.truncate       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2   { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3   { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Backgrounds & borders ──────────────────────────────────────────────── */
.bg-bg          { background: var(--color-bg); }
.bg-surface     { background: var(--color-surface); }
.bg-surface-2   { background: var(--color-surface-2); }
.bg-elevated    { background: var(--color-bg-elevated); }
.bg-primary     { background: var(--color-primary); color: var(--color-primary-on); }
.bg-transparent { background: transparent; }

.border         { border: 1px solid var(--color-border); }
.border-light   { border: 1px solid var(--color-border-light); }
.border-strong  { border: 1px solid var(--color-border-strong); }
.border-t       { border-top: 1px solid var(--color-border); }
.border-b       { border-bottom: 1px solid var(--color-border); }
.border-none    { border: none; }

.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: var(--radius-full); }

/* ── Elevation ──────────────────────────────────────────────────────────── */
.shadow-none    { box-shadow: none; }
.shadow-xs      { box-shadow: var(--shadow-xs); }
.shadow-sm      { box-shadow: var(--shadow-sm); }
.shadow-md      { box-shadow: var(--shadow-md); }
.shadow-lg      { box-shadow: var(--shadow-lg); }
.shadow-xl      { box-shadow: var(--shadow-xl); }

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

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

/* ── Cursor ─────────────────────────────────────────────────────────────── */
.cursor-pointer       { cursor: pointer; }
.cursor-not-allowed   { cursor: not-allowed; }
.cursor-progress      { cursor: progress; }

/* ── Visibility helpers ─────────────────────────────────────────────────── */
.invisible  { visibility: hidden; }
.visible    { visibility: visible; }
.opacity-50 { opacity: 0.50; }
.opacity-75 { opacity: 0.75; }

/* `sr-only` is defined in reset.css — kept here as a no-op for grep-ability */

/* ── Responsive variants ────────────────────────────────────────────────── */
/* The most-used utilities get sm:/md:/lg:/xl: prefixes. Only the layout ones
   get prefixed — for typography and color use the design-system tokens or
   conditional CSS instead. */

@media (min-width: 480px)  /* sm */ {
  .sm\:hidden        { display: none !important; }
  .sm\:block         { display: block; }
  .sm\:flex          { display: flex; }
  .sm\:grid          { display: grid; }
  .sm\:flex-row      { flex-direction: row; }
  .sm\:flex-col      { flex-direction: column; }
  .sm\:items-center  { align-items: center; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:grid-cols-2   { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:gap-4         { gap: var(--space-4); }
  .sm\:p-4           { padding: var(--space-4); }
  .sm\:p-6           { padding: var(--space-6); }
  .sm\:text-base     { font-size: var(--text-base); line-height: var(--lh-base); }
}

@media (min-width: 768px)  /* md */ {
  .md\:hidden        { display: none !important; }
  .md\:block         { display: block; }
  .md\:flex          { display: flex; }
  .md\:grid          { display: grid; }
  .md\:inline-flex   { display: inline-flex; }
  .md\:flex-row      { flex-direction: row; }
  .md\:flex-col      { flex-direction: column; }
  .md\:items-center  { align-items: center; }
  .md\:items-start   { align-items: flex-start; }
  .md\:justify-between { justify-content: space-between; }
  .md\:grid-cols-2   { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .md\:grid-cols-3   { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .md\:grid-cols-4   { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .md\:gap-4         { gap: var(--space-4); }
  .md\:gap-6         { gap: var(--space-6); }
  .md\:p-6           { padding: var(--space-6); }
  .md\:p-8           { padding: var(--space-8); }
  .md\:text-lg       { font-size: var(--text-lg); line-height: var(--lh-lg); }
  .md\:text-xl       { font-size: var(--text-xl); line-height: var(--lh-xl); }
  .md\:max-w-md      { max-width: 520px; }
  .md\:max-w-lg      { max-width: 720px; }
}

@media (min-width: 1024px) /* lg */ {
  .lg\:hidden        { display: none !important; }
  .lg\:block         { display: block; }
  .lg\:flex          { display: flex; }
  .lg\:grid          { display: grid; }
  .lg\:flex-row      { flex-direction: row; }
  .lg\:grid-cols-2   { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .lg\:grid-cols-3   { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .lg\:grid-cols-4   { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .lg\:grid-cols-6   { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .lg\:gap-6         { gap: var(--space-6); }
  .lg\:gap-8         { gap: var(--space-8); }
  .lg\:p-8           { padding: var(--space-8); }
  .lg\:p-10          { padding: var(--space-10); }
}

@media (min-width: 1280px) /* xl */ {
  .xl\:hidden        { display: none !important; }
  .xl\:block         { display: block; }
  .xl\:grid-cols-4   { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .xl\:grid-cols-6   { grid-template-columns: repeat(6, minmax(0,1fr)); }
}