/* ==========================================================================
   utilities.css — Design Token Utility Classes
   ==========================================================================
   Maps inline style patterns to reusable utility classes.
   All tokens reference CSS custom properties from base.html.
   Use these instead of inline styles for consistency.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   TEXT COLORS
   ══════════════════════════════════════════════════════════════════════════ */
.text-primary   { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary  { color: var(--text-tertiary) !important; }
.text-quaternary { color: var(--text-quaternary) !important; }
.text-accent    { color: var(--accent) !important; }
.text-danger    { color: var(--danger) !important; }
.text-success   { color: var(--success) !important; }
.text-warn      { color: var(--warn) !important; }
.text-info      { color: var(--info) !important; }
.text-muted     { color: var(--text-tertiary) !important; }

/* Text alignment */
.text-left    { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }

/* Text decoration */
.no-underline    { text-decoration: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — font-size + font-weight + color shortcuts
   ══════════════════════════════════════════════════════════════════════════ */
.text-h1 {
  font-size: var(--text-h1);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.text-h2 {
  font-size: var(--text-h2);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.text-h3 {
  font-size: var(--text-h3);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
}

.text-body {
  font-size: var(--text-body);
  color: var(--text-secondary);
}

.text-body-sm {
  font-size: var(--text-body-sm);
  color: var(--text-secondary);
}

.text-caption {
  font-size: var(--text-caption);
  color: var(--text-tertiary);
}

.text-xs {
  font-size: 11px;
}

.text-sm {
  font-size: 13px;
}

/* Font weight */
.font-regular   { font-weight: var(--font-regular) !important; }
.font-medium    { font-weight: var(--font-medium) !important; }
.font-semibold  { font-weight: var(--font-semibold) !important; }
.font-bold      { font-weight: 700 !important; }

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

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

/* Text overflow */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Line clamp */
.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;
}

/* Letter spacing */
.tracking-wide  { letter-spacing: 0.3px !important; }
.tracking-wider { letter-spacing: 0.5px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DISPLAY
   ══════════════════════════════════════════════════════════════════════════ */
.block        { display: block !important; }
.inline-block { display: inline-block !important; }
.inline       { display: inline !important; }
.hidden       { display: none !important; }

/* Screen-reader only */
.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;
}

/* ══════════════════════════════════════════════════════════════════════════
   FLEXBOX
   ══════════════════════════════════════════════════════════════════════════ */
.flex         { display: flex !important; }
.inline-flex  { display: inline-flex !important; }
.flex-wrap    { flex-wrap: wrap !important; }
.flex-nowrap  { flex-wrap: nowrap !important; }
.flex-1       { flex: 1 !important; }
.flex-shrink-0,
.shrink-0     { flex-shrink: 0 !important; }
.flex-col     { flex-direction: column !important; }

/* Alignment */
.items-start    { align-items: flex-start !important; }
.items-end      { align-items: flex-end !important; }
.items-center   { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch  { align-items: stretch !important; }

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

.self-start   { align-self: flex-start !important; }
.self-center  { align-self: center !important; }
.self-end     { align-self: flex-end !important; }

/* ══════════════════════════════════════════════════════════════════════════
   GRID
   ══════════════════════════════════════════════════════════════════════════ */
.grid         { display: grid !important; }

.grid-cols-1  { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   SPACING — based on 4px spacing system (var(--space-N))
   ══════════════════════════════════════════════════════════════════════════ */

/* Margin bottom */
.mb-0  { margin-bottom: var(--space-0) !important; }
.mb-1  { margin-bottom: var(--space-1) !important; }
.mb-2  { margin-bottom: var(--space-2) !important; }
.mb-3  { margin-bottom: var(--space-3) !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mb-5  { margin-bottom: var(--space-5) !important; }
.mb-6  { margin-bottom: var(--space-6) !important; }
.mb-8  { margin-bottom: var(--space-8) !important; }
.mb-24 { margin-bottom: 24px !important; }

/* Margin top */
.mt-0  { margin-top: var(--space-0) !important; }
.mt-1  { margin-top: var(--space-1) !important; }
.mt-2  { margin-top: var(--space-2) !important; }
.mt-3  { margin-top: var(--space-3) !important; }
.mt-4  { margin-top: var(--space-4) !important; }
.mt-5  { margin-top: var(--space-5) !important; }
.mt-6  { margin-top: var(--space-6) !important; }
.mt-8  { margin-top: var(--space-8) !important; }

/* Margin left */
.ml-0  { margin-left: var(--space-0) !important; }
.ml-1  { margin-left: var(--space-1) !important; }
.ml-2  { margin-left: var(--space-2) !important; }
.ml-3  { margin-left: var(--space-3) !important; }
.ml-4  { margin-left: var(--space-4) !important; }

/* Margin right */
.mr-0  { margin-right: var(--space-0) !important; }
.mr-1  { margin-right: var(--space-1) !important; }
.mr-2  { margin-right: var(--space-2) !important; }
.mr-3  { margin-right: var(--space-3) !important; }
.mr-4  { margin-right: var(--space-4) !important; }
.mr-1_5,
.mr-1\.5 { margin-right: 6px !important; }

/* Margin auto */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }

/* Gap (flex/grid gap) */
.gap-0 { gap: var(--space-0) !important; }
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-5 { gap: var(--space-5) !important; }
.gap-6 { gap: var(--space-6) !important; }
.gap-8 { gap: var(--space-8) !important; }

/* Gap X/Y */
.gap-x-2 { column-gap: var(--space-2) !important; }
.gap-x-3 { column-gap: var(--space-3) !important; }
.gap-x-4 { column-gap: var(--space-4) !important; }
.gap-y-2 { row-gap: var(--space-2) !important; }
.gap-y-3 { row-gap: var(--space-3) !important; }
.gap-y-4 { row-gap: var(--space-4) !important; }

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

/* Padding horizontal (left + right) */
.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.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-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }

/* Padding vertical (top + bottom) */
.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.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-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }

/* ══════════════════════════════════════════════════════════════════════════
   WIDTH / HEIGHT
   ══════════════════════════════════════════════════════════════════════════ */
.w-full  { width: 100% !important; }
.w-auto  { width: auto !important; }
.h-full  { height: 100% !important; }
.h-auto  { height: auto !important; }

/* Min-width 0 (fixes flex overflow) */
.min-w-0 { min-width: 0 !important; }

/* Max-width containers */
.max-w-sm  { max-width: 24rem !important; }
.max-w-md  { max-width: 28rem !important; }
.max-w-lg  { max-width: 32rem !important; }
.max-w-xl  { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-5xl { max-width: 64rem !important; }
.max-w-6xl { max-width: 72rem !important; }
.max-w-7xl { max-width: 80rem !important; }

/* ══════════════════════════════════════════════════════════════════════════
   BORDERS
   ══════════════════════════════════════════════════════════════════════════ */
.border         { border: 1px solid var(--border-standard) !important; }
.border-0       { border: none !important; }
.border-b       { border-bottom: 1px solid var(--border-standard) !important; }
.border-t       { border-top: 1px solid var(--border-standard) !important; }
.border-l       { border-left: 1px solid var(--border-standard) !important; }
.border-r       { border-right: 1px solid var(--border-standard) !important; }
.border-subtle  { border-color: var(--border-subtle) !important; }

/* Border radius */
.rounded-sm  { border-radius: var(--radius-sm) !important; }
.rounded-md  { border-radius: var(--radius-md) !important; }
.rounded-lg  { border-radius: var(--radius-lg) !important; }
.rounded-xl  { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-pill) !important; }
.rounded     { border-radius: var(--radius-md) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   OVERFLOW
   ══════════════════════════════════════════════════════════════════════════ */
.overflow-hidden  { overflow: hidden !important; }
.overflow-auto    { overflow: auto !important; }
.overflow-x-auto  { overflow-x: auto !important; }
.overflow-y-auto  { overflow-y: auto !important; }
.overflow-visible { overflow: visible !important; }

/* ══════════════════════════════════════════════════════════════════════════
   CURSOR
   ══════════════════════════════════════════════════════════════════════════ */
.cursor-pointer    { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.pointer-events-none { pointer-events: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   OPACITY
   ══════════════════════════════════════════════════════════════════════════ */
.opacity-0  { opacity: 0 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-60 { opacity: 0.6 !important; }
.opacity-70 { opacity: 0.7 !important; }
.opacity-80 { opacity: 0.8 !important; }
.opacity-100 { opacity: 1 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   WHITESPACE
   ══════════════════════════════════════════════════════════════════════════ */
.whitespace-nowrap   { white-space: nowrap !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }
.whitespace-normal   { white-space: normal !important; }

/* ══════════════════════════════════════════════════════════════════════════
   WHITE SPACE / VISIBILITY
   ══════════════════════════════════════════════════════════════════════════ */
.space-y-1 > * + * { margin-top: var(--space-1) !important; }
.space-y-2 > * + * { margin-top: var(--space-2) !important; }
.space-y-3 > * + * { margin-top: var(--space-3) !important; }
.space-y-4 > * + * { margin-top: var(--space-4) !important; }
.space-y-5 > * + * { margin-top: var(--space-5) !important; }
.space-y-6 > * + * { margin-top: var(--space-6) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS (min-width)
   ══════════════════════════════════════════════════════════════════════════ */

/* sm: 640px */
@media (min-width: 640px) {
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .sm\:flex { display: flex !important; }
  .sm\:hidden { display: none !important; }
  .sm\:text-left { text-align: left !important; }
  .sm\:text-right { text-align: right !important; }
}

/* md: 768px */
@media (min-width: 768px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .md\:flex { display: flex !important; }
  .md\:hidden { display: none !important; }
  .md\:text-left { text-align: left !important; }
  .md\:w-auto { width: auto !important; }
}

/* lg: 1024px */
@media (min-width: 1024px) {
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .lg\:col-span-2 { grid-column: span 2 / span 2 !important; }
  .lg\:flex { display: flex !important; }
  .lg\:hidden { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TRANSITIONS
   ══════════════════════════════════════════════════════════════════════════ */
.transition        { transition: all var(--duration-fast) var(--ease-default) !important; }
.transition-colors { transition: background-color var(--duration-fast) var(--ease-default),
                     border-color var(--duration-fast) var(--ease-default),
                     color var(--duration-fast) var(--ease-default) !important; }
.transition-all    { transition: all var(--duration-fast) var(--ease-default) !important; }
.duration-150      { transition-duration: 150ms !important; }
.duration-200      { transition-duration: 200ms !important; }
.ease-in-out       { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }

/* Hover states */
.hover\:underline:hover { text-decoration: underline !important; }
.hover\:opacity-80:hover { opacity: 0.8 !important; }
.hover\:opacity-100:hover { opacity: 1 !important; }