/* ============================================================
   EaseMotion CSS — utilities.css
   Human-readable layout and spacing utility classes
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   DISPLAY
   ──────────────────────────────────────────────────────────── */

.ease-block        { display: block; }
.ease-inline       { display: inline; }
.ease-inline-block { display: inline-block; }
.ease-hidden       { display: none; }

/* ────────────────────────────────────────────────────────────
   FLEXBOX
   ──────────────────────────────────────────────────────────── */

.ease-flex         { display: flex; }
.ease-inline-flex  { display: inline-flex; }

/* Center everything: the most-used utility */
.ease-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ease-flex-col     { flex-direction: column; }
.ease-flex-row     { flex-direction: row; }
.ease-flex-wrap    { flex-wrap: wrap; }
.ease-flex-nowrap  { flex-wrap: nowrap; }

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

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

.ease-flex-1    { flex: 1 1 0%; }
.ease-flex-auto { flex: 1 1 auto; }
.ease-flex-none { flex: none; }

.ease-grow   { flex-grow: 1; }
.ease-shrink { flex-shrink: 1; }

/* ────────────────────────────────────────────────────────────
   GRID
   ──────────────────────────────────────────────────────────── */

.ease-grid       { display: grid; }
.ease-inline-grid { display: inline-grid; }

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

/* Auto-fit responsive columns */
.ease-grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ease-col-span-2 { grid-column: span 2 / span 2; }
.ease-col-span-3 { grid-column: span 3 / span 3; }
.ease-col-full   { grid-column: 1 / -1; }

/* ────────────────────────────────────────────────────────────
   GAP
   ──────────────────────────────────────────────────────────── */

.ease-gap-1  { gap: var(--ease-space-1); }
.ease-gap-2  { gap: var(--ease-space-2); }
.ease-gap-3  { gap: var(--ease-space-3); }
.ease-gap    { gap: var(--ease-space-4); }   /* default alias */
.ease-gap-4  { gap: var(--ease-space-4); }
.ease-gap-6  { gap: var(--ease-space-6); }
.ease-gap-8  { gap: var(--ease-space-8); }
.ease-gap-10 { gap: var(--ease-space-10); }

/* ────────────────────────────────────────────────────────────
   PADDING
   ──────────────────────────────────────────────────────────── */

.ease-padding    { padding: var(--ease-space-4); }  /* default alias */
.ease-padding-1  { padding: var(--ease-space-1); }
.ease-padding-2  { padding: var(--ease-space-2); }
.ease-padding-3  { padding: var(--ease-space-3); }
.ease-padding-4  { padding: var(--ease-space-4); }
.ease-padding-6  { padding: var(--ease-space-6); }
.ease-padding-8  { padding: var(--ease-space-8); }
.ease-padding-10 { padding: var(--ease-space-10); }
.ease-padding-12 { padding: var(--ease-space-12); }

.ease-pt-4 { padding-top:    var(--ease-space-4); }
.ease-pr-4 { padding-right:  var(--ease-space-4); }
.ease-pb-4 { padding-bottom: var(--ease-space-4); }
.ease-pl-4 { padding-left:   var(--ease-space-4); }

.ease-px-4 { padding-left: var(--ease-space-4); padding-right:  var(--ease-space-4); }
.ease-py-4 { padding-top:  var(--ease-space-4); padding-bottom: var(--ease-space-4); }
.ease-px-8 { padding-left: var(--ease-space-8); padding-right:  var(--ease-space-8); }
.ease-py-8 { padding-top:  var(--ease-space-8); padding-bottom: var(--ease-space-8); }

/* ────────────────────────────────────────────────────────────
   MARGIN
   ──────────────────────────────────────────────────────────── */

.ease-margin     { margin: var(--ease-space-4); }   /* default alias */
.ease-margin-1   { margin: var(--ease-space-1); }
.ease-margin-2   { margin: var(--ease-space-2); }
.ease-margin-3   { margin: var(--ease-space-3); }
.ease-margin-4   { margin: var(--ease-space-4); }
.ease-margin-6   { margin: var(--ease-space-6); }
.ease-margin-8   { margin: var(--ease-space-8); }
.ease-margin-auto { margin: auto; }

.ease-mx-auto { margin-left: auto; margin-right: auto; }
.ease-my-4    { margin-top: var(--ease-space-4); margin-bottom: var(--ease-space-4); }
.ease-my-8    { margin-top: var(--ease-space-8); margin-bottom: var(--ease-space-8); }

.ease-mt-4  { margin-top:    var(--ease-space-4); }
.ease-mr-4  { margin-right:  var(--ease-space-4); }
.ease-mb-4  { margin-bottom: var(--ease-space-4); }
.ease-ml-4  { margin-left:   var(--ease-space-4); }

/* ────────────────────────────────────────────────────────────
   WIDTH & HEIGHT
   ──────────────────────────────────────────────────────────── */

.ease-w-full    { width: 100%; }
.ease-w-screen  { width: 100vw; }
.ease-w-auto    { width: auto; }
.ease-h-full    { height: 100%; }
.ease-h-screen  { height: 100vh; }
.ease-h-auto    { height: auto; }

/* Max-width container */
.ease-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ease-space-6);
  padding-right: var(--ease-space-6);
}

/* ────────────────────────────────────────────────────────────
   POSITIONING
   ──────────────────────────────────────────────────────────── */

.ease-relative  { position: relative; }
.ease-absolute  { position: absolute; }
.ease-fixed     { position: fixed; }
.ease-sticky    { position: sticky; top: 0; }

/* ────────────────────────────────────────────────────────────
   OVERFLOW
   ──────────────────────────────────────────────────────────── */

.ease-overflow-hidden  { overflow: hidden; }
.ease-overflow-auto    { overflow: auto; }
.ease-overflow-scroll  { overflow: scroll; }
.ease-overflow-x-auto  { overflow-x: auto; }
.ease-overflow-y-auto  { overflow-y: auto; }

/* ────────────────────────────────────────────────────────────
   TEXT
   ──────────────────────────────────────────────────────────── */

.ease-text-xs   { font-size: var(--ease-text-xs); }
.ease-text-sm   { font-size: var(--ease-text-sm); }
.ease-text-base { font-size: var(--ease-text-base); }
.ease-text-lg   { font-size: var(--ease-text-lg); }
.ease-text-xl   { font-size: var(--ease-text-xl); }
.ease-text-2xl  { font-size: var(--ease-text-2xl); }
.ease-text-3xl  { font-size: var(--ease-text-3xl); }
.ease-text-4xl  { font-size: var(--ease-text-4xl); }

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

.ease-font-light    { font-weight: 300; }
.ease-font-regular  { font-weight: 400; }
.ease-font-medium   { font-weight: 500; }
.ease-font-semibold { font-weight: 600; }
.ease-font-bold     { font-weight: 700; }

.ease-uppercase   { text-transform: uppercase; }
.ease-lowercase   { text-transform: lowercase; }
.ease-capitalize  { text-transform: capitalize; }

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

/* ────────────────────────────────────────────────────────────
   COLORS (text + background)
   ──────────────────────────────────────────────────────────── */

.ease-text-primary   { color: var(--ease-color-primary); }
.ease-text-success   { color: var(--ease-color-success); }
.ease-text-danger    { color: var(--ease-color-danger); }
.ease-text-warning   { color: var(--ease-color-warning); }
.ease-text-muted     { color: var(--ease-color-muted); }
.ease-text-white     { color: #ffffff; }

.ease-bg-primary     { background-color: var(--ease-color-primary); }
.ease-bg-success     { background-color: var(--ease-color-success); }
.ease-bg-danger      { background-color: var(--ease-color-danger); }
.ease-bg-warning     { background-color: var(--ease-color-warning); }
.ease-bg-white       { background-color: #ffffff; }
.ease-bg-surface     { background-color: var(--ease-color-surface); }
.ease-bg-neutral     { background-color: var(--ease-color-neutral-100); }

/* ────────────────────────────────────────────────────────────
   BORDER & RADIUS
   ──────────────────────────────────────────────────────────── */

.ease-border        { border: 1px solid var(--ease-color-neutral-200); }
.ease-border-2      { border: 2px solid var(--ease-color-neutral-200); }
.ease-border-primary { border-color: var(--ease-color-primary); }

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

/* ────────────────────────────────────────────────────────────
   SHADOW
   ──────────────────────────────────────────────────────────── */

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

/* ────────────────────────────────────────────────────────────
   OPACITY
   ──────────────────────────────────────────────────────────── */

.ease-opacity-0   { opacity: 0; }
.ease-opacity-25  { opacity: 0.25; }
.ease-opacity-50  { opacity: 0.50; }
.ease-opacity-75  { opacity: 0.75; }
.ease-opacity-100 { opacity: 1; }

/* ────────────────────────────────────────────────────────────
   CURSOR
   ──────────────────────────────────────────────────────────── */

.ease-cursor-pointer  { cursor: pointer; }
.ease-cursor-default  { cursor: default; }
.ease-cursor-not-allowed { cursor: not-allowed; }

/* ────────────────────────────────────────────────────────────
   RESPONSIVE HELPERS
   ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .ease-sm-hidden    { display: none; }
  .ease-sm-full      { width: 100%; }
  .ease-sm-flex-col  { flex-direction: column; }
  .ease-sm-grid-cols-1 { grid-template-columns: 1fr; }
  .ease-sm-text-center { text-align: center; }
}