/* ==========================================================================
   Utilities
   ==========================================================================

   Bounded utility class system for Mission Control.
   All new utilities reference design tokens (no hardcoded values)
   and use CSS logical properties where applicable.

   Categories:
   - Text: txt-small, txt-large, txt-align-center, txt-subtle, txt-nowrap
   - Flexbox/Grid: flex, flex-column, flex-wrap, justify-end, align-center
   - Gap: gap, gap-half
   - Padding: pad, pad-block, pad-inline, pad-block-half, pad-inline-half
   - Margin: margin-block, margin-inline, margin-block-half, margin-none
   - Fill: fill, fill-shade, fill-transparent
   - Visibility: visually-hidden, [hidden]
   - Overflow: overflow-ellipsis, overflow-clip

   ========================================================================== */

@layer utilities {

/* ========================================================================
   New Bounded Utilities
   ========================================================================

   These utilities use semantic design tokens (--color-*, --space-*)
   and CSS logical properties. Prefer these over legacy equivalents.
   ======================================================================== */

/* --- Text utilities ---
   NOTE: .txt-* classes use semantic tokens (--color-text-*) that adapt
   to dark mode. The .text-primary/secondary/tertiary/muted classes now
   also adapt (their --text-* tokens delegate to semantic aliases).
   Other .text-* classes (link, error, etc.) still use fixed tokens. */

.txt-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.txt-large {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.txt-align-center { text-align: center; }
.txt-align-start { text-align: start; }
.txt-align-end { text-align: end; }

.txt-subtle { color: var(--color-text-tertiary); }

/* Preferred over legacy .text-nowrap (identical behavior) */
.txt-nowrap { white-space: nowrap; }

/* --- Flexbox / Grid utilities --- */

.flex { display: flex; }

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-wrap { flex-wrap: wrap; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }

/* --- Gap utilities --- */

.gap { gap: var(--space-gap); }
.gap-half { gap: var(--space-gap-sm); }

/* --- Padding utilities (logical properties) --- */

.pad { padding: var(--space-component-padding); }
.pad-block { padding-block: var(--space-component-padding); }
.pad-inline { padding-inline: var(--space-component-padding); }
.pad-block-half { padding-block: var(--space-component-padding-xs); }
.pad-inline-half { padding-inline: var(--space-component-padding-xs); }

/* --- Margin utilities (logical properties) --- */

.margin-block { margin-block: var(--space-stack); }
.margin-inline { margin-inline: var(--space-inline); }
.margin-block-half { margin-block: var(--space-stack-xs); }
.margin-none { margin: 0; }

/* --- Fill (background) utilities --- */

.fill { background-color: var(--color-bg-secondary); }
.fill-shade { background-color: var(--color-bg-tertiary); }
.fill-transparent { background-color: transparent; }

/* NOTE: .visually-hidden is defined in design-system.css (@layer utilities)
   and .hidden is unlayered in design-system.css for cascade priority. */

/* TODO: Move [hidden] to a @layer reset file when the full layer stack
   is established (MC-005 Phase 1). This is a browser normalization
   concern, not a utility. */
/* stylelint-disable-next-line declaration-no-important -- browser normalization must override any display value */
[hidden] { display: none !important; }

/* --- Overflow utilities ---
   NOTE: .overflow-ellipsis is the preferred name for new code.
   Legacy .truncate (below) has identical behavior and will be
   deprecated in a future migration pass. */

.overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow-clip {
  overflow: clip;
}

/* ========================================================================
   Legacy Utility Classes (consolidated from design-system.css)
   ========================================================================

   These classes use the older token system (--space-*). They are
   preserved for backward compatibility. New code should prefer the
   bounded utilities above. Properties have been converted to CSS
   logical equivalents per MC-005 Section 6.
   ======================================================================== */

/* --- Margin utilities (logical properties) --- */
.m-0 { margin: var(--space-0); }
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }

.mt-0 { margin-block-start: var(--space-0); }
.mt-1 { margin-block-start: var(--space-1); }
.mt-2 { margin-block-start: var(--space-2); }
.mt-3 { margin-block-start: var(--space-3); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-6 { margin-block-start: var(--space-6); }
.mt-8 { margin-block-start: var(--space-8); }

.mb-0 { margin-block-end: var(--space-0); }
.mb-1 { margin-block-end: var(--space-1); }
.mb-2 { margin-block-end: var(--space-2); }
.mb-3 { margin-block-end: var(--space-3); }
.mb-4 { margin-block-end: var(--space-4); }
.mb-6 { margin-block-end: var(--space-6); }
.mb-8 { margin-block-end: var(--space-8); }

/* NOTE: .ml-* and .mr-* class names use physical conventions (l=left, r=right)
   but implementations use CSS logical properties (inline-start/inline-end).
   In LTR layouts these are equivalent; in RTL .ml-* maps to the right side. */
.ml-0 { margin-inline-start: var(--space-0); }
.ml-1 { margin-inline-start: var(--space-1); }
.ml-2 { margin-inline-start: var(--space-2); }
.ml-3 { margin-inline-start: var(--space-3); }
.ml-4 { margin-inline-start: var(--space-4); }

.mr-0 { margin-inline-end: var(--space-0); }
.mr-1 { margin-inline-end: var(--space-1); }
.mr-2 { margin-inline-end: var(--space-2); }
.mr-3 { margin-inline-end: var(--space-3); }
.mr-4 { margin-inline-end: var(--space-4); }

/* --- Padding utilities (logical properties) --- */
.p-0 { padding: var(--space-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-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

.pt-0 { padding-block-start: var(--space-0); }
.pt-1 { padding-block-start: var(--space-1); }
.pt-2 { padding-block-start: var(--space-2); }
.pt-3 { padding-block-start: var(--space-3); }
.pt-4 { padding-block-start: var(--space-4); }
.pt-6 { padding-block-start: var(--space-6); }
.pt-8 { padding-block-start: var(--space-8); }

.pb-0 { padding-block-end: var(--space-0); }
.pb-1 { padding-block-end: var(--space-1); }
.pb-2 { padding-block-end: var(--space-2); }
.pb-3 { padding-block-end: var(--space-3); }
.pb-4 { padding-block-end: var(--space-4); }
.pb-6 { padding-block-end: var(--space-6); }
.pb-8 { padding-block-end: var(--space-8); }

/* NOTE: .pl-* and .pr-* class names use physical conventions (l=left, r=right)
   but implementations use CSS logical properties (inline-start/inline-end).
   In LTR layouts these are equivalent; in RTL .pl-* maps to the right side. */
.pl-0 { padding-inline-start: var(--space-0); }
.pl-1 { padding-inline-start: var(--space-1); }
.pl-2 { padding-inline-start: var(--space-2); }
.pl-3 { padding-inline-start: var(--space-3); }
.pl-4 { padding-inline-start: var(--space-4); }

.pr-0 { padding-inline-end: var(--space-0); }
.pr-1 { padding-inline-end: var(--space-1); }
.pr-2 { padding-inline-end: var(--space-2); }
.pr-3 { padding-inline-end: var(--space-3); }
.pr-4 { padding-inline-end: var(--space-4); }

.px-0 { padding-inline: var(--space-0); }
.px-1 { padding-inline: var(--space-1); }
.px-2 { padding-inline: var(--space-2); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-6 { padding-inline: var(--space-6); }

.py-0 { padding-block: var(--space-0); }
.py-1 { padding-block: var(--space-1); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-6 { padding-block: var(--space-6); }

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

/* NOTE: .hidden is defined unlayered in design-system.css */

/* ========================================================================
   Legacy Utility Classes (consolidated from typography.css)
   ========================================================================

   These classes use the typography token system (--text-primary,
   --text-tertiary, etc.) which now delegates to semantic aliases
   (--color-text-*) and adapts to dark mode. The bounded .txt-*
   utilities above also use semantic tokens. Both are safe for new code.
   ======================================================================== */

/* --- Text semantic styles ---
   NOTE: These multi-property semantic styles (.text-lead, .text-body,
   .text-small, .text-xs) conceptually belong in the base layer, not
   utilities. When MC-005 Phase 1 establishes the full layer stack,
   relocate these to typography.css / @layer base. They set font-size,
   line-height, AND color — making them semantic styles rather than
   single-purpose utilities per MC-005 Section 5. */
.text-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.text-body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
}

.text-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-tertiary);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

/* --- Font size utilities --- */
.text-size-xs { font-size: var(--text-xs); }
.text-size-sm { font-size: var(--text-sm); }
.text-size-base { font-size: var(--text-base); }
.text-size-md { font-size: var(--text-md); }
.text-size-lg { font-size: var(--text-lg); }
.text-size-xl { font-size: var(--text-xl); }
.text-size-2xl { font-size: var(--text-2xl); }
.text-size-3xl { font-size: var(--text-3xl); }
.text-size-4xl { font-size: var(--text-4xl); }
.text-size-5xl { font-size: var(--text-5xl); }
.text-size-6xl { font-size: var(--text-6xl); }

/* --- Font weight utilities --- */
.font-thin { font-weight: var(--font-thin); }
.font-extralight { font-weight: var(--font-extralight); }
.font-light { font-weight: var(--font-light); }
.font-normal { font-weight: var(--font-normal); }
.font-medium { font-weight: var(--font-medium); }
.font-semibold { font-weight: var(--font-semibold); }
.font-bold { font-weight: var(--font-bold); }
.font-extrabold { font-weight: var(--font-extrabold); }
.font-black { font-weight: var(--font-black); }

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

/* --- Line height utilities --- */
.leading-none { line-height: var(--leading-none); }
.leading-tight { line-height: var(--leading-tight); }
.leading-snug { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }
.leading-loose { line-height: var(--leading-loose); }

/* --- Letter spacing utilities --- */
.tracking-tighter { letter-spacing: var(--tracking-tighter); }
.tracking-tight { letter-spacing: var(--tracking-tight); }
.tracking-normal { letter-spacing: var(--tracking-normal); }
.tracking-wide { letter-spacing: var(--tracking-wide); }
.tracking-wider { letter-spacing: var(--tracking-wider); }
.tracking-widest { letter-spacing: var(--tracking-widest); }

/* --- Text color utilities ---
   NOTE: .text-primary/secondary/tertiary/muted now delegate to semantic
   aliases (--color-text-*) and adapt to dark mode. The remaining classes
   (inverse, link, error, success, warning) still use fixed tokens. */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }
.text-inverse { color: var(--text-inverse); }
.text-link { color: var(--text-link); }
.text-error { color: var(--text-error); }
.text-success { color: var(--text-success); }
.text-warning { color: var(--text-warning); }

/* --- Text alignment utilities --- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* --- Text transform utilities --- */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* --- Text decoration utilities --- */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* --- Text overflow utilities ---
   NOTE: .truncate is the legacy equivalent of .overflow-ellipsis above.
   Prefer .overflow-ellipsis for new code. */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Legacy equivalent of .txt-nowrap. Prefer .txt-nowrap for new code. */
.text-wrap { white-space: normal; }
.text-nowrap { white-space: nowrap; }
.break-words { overflow-wrap: break-word; }
.break-all { word-break: break-all; }

} /* @layer utilities */