/* Utility Classes */
/* Utility framework with ds- prefix */

/* Spacing utilities using logical properties */
/* Padding utilities */
.ds-padding-xs { padding: var(--ds-space-xs); }
.ds-padding-s { padding: var(--ds-space-s); }
.ds-padding-m { padding: var(--ds-space-m); }
.ds-padding-l { padding: var(--ds-space-l); }
.ds-padding-xl { padding: var(--ds-space-xl); }
.ds-padding-xxl { padding: var(--ds-space-xxl); }
.ds-padding-xxxl { padding: var(--ds-space-xxxl); }

/* Padding inline (left/right) */
.ds-padding-i-xs { padding-inline: var(--ds-space-xs); }
.ds-padding-i-s { padding-inline: var(--ds-space-s); }
.ds-padding-i-m { padding-inline: var(--ds-space-m); }
.ds-padding-i-l { padding-inline: var(--ds-space-l); }
.ds-padding-i-xl { padding-inline: var(--ds-space-xl); }
.ds-padding-i-xxl { padding-inline: var(--ds-space-xxl); }

/* Padding block (top/bottom) */
.ds-padding-b-xs { padding-block: var(--ds-space-xs); }
.ds-padding-b-s { padding-block: var(--ds-space-s); }
.ds-padding-b-m { padding-block: var(--ds-space-m); }
.ds-padding-b-l { padding-block: var(--ds-space-l); }
.ds-padding-b-xl { padding-block: var(--ds-space-xl); }
.ds-padding-b-xxl { padding-block: var(--ds-space-xxl); }

/* Padding inline start (left in LTR) */
.ds-padding-is-xs { padding-inline-start: var(--ds-space-xs); }
.ds-padding-is-s { padding-inline-start: var(--ds-space-s); }
.ds-padding-is-m { padding-inline-start: var(--ds-space-m); }
.ds-padding-is-l { padding-inline-start: var(--ds-space-l); }
.ds-padding-is-xl { padding-inline-start: var(--ds-space-xl); }

/* Padding inline end (right in LTR) */
.ds-padding-ie-xs { padding-inline-end: var(--ds-space-xs); }
.ds-padding-ie-s { padding-inline-end: var(--ds-space-s); }
.ds-padding-ie-m { padding-inline-end: var(--ds-space-m); }
.ds-padding-ie-l { padding-inline-end: var(--ds-space-l); }
.ds-padding-ie-xl { padding-inline-end: var(--ds-space-xl); }

/* Padding block start (top) */
.ds-padding-bs-xs { padding-block-start: var(--ds-space-xs); }
.ds-padding-bs-s { padding-block-start: var(--ds-space-s); }
.ds-padding-bs-m { padding-block-start: var(--ds-space-m); }
.ds-padding-bs-l { padding-block-start: var(--ds-space-l); }
.ds-padding-bs-xl { padding-block-start: var(--ds-space-xl); }

/* Padding block end (bottom) */
.ds-padding-be-xs { padding-block-end: var(--ds-space-xs); }
.ds-padding-be-s { padding-block-end: var(--ds-space-s); }
.ds-padding-be-m { padding-block-end: var(--ds-space-m); }
.ds-padding-be-l { padding-block-end: var(--ds-space-l); }
.ds-padding-be-xl { padding-block-end: var(--ds-space-xl); }

/* Margin utilities */
.ds-margin-xs { margin: var(--ds-space-xs); }
.ds-margin-s { margin: var(--ds-space-s); }
.ds-margin-m { margin: var(--ds-space-m); }
.ds-margin-l { margin: var(--ds-space-l); }
.ds-margin-xl { margin: var(--ds-space-xl); }
.ds-margin-xxl { margin: var(--ds-space-xxl); }

/* Margin inline (left/right) */
.ds-margin-i-xs { margin-inline: var(--ds-space-xs); }
.ds-margin-i-s { margin-inline: var(--ds-space-s); }
.ds-margin-i-m { margin-inline: var(--ds-space-m); }
.ds-margin-i-l { margin-inline: var(--ds-space-l); }
.ds-margin-i-xl { margin-inline: var(--ds-space-xl); }
.ds-margin-i-auto { margin-inline: auto; }

/* Margin block (top/bottom) */
.ds-margin-b-xs { margin-block: var(--ds-space-xs); }
.ds-margin-b-s { margin-block: var(--ds-space-s); }
.ds-margin-b-m { margin-block: var(--ds-space-m); }
.ds-margin-b-l { margin-block: var(--ds-space-l); }
.ds-margin-b-xl { margin-block: var(--ds-space-xl); }

/* Margin inline start (left in LTR) */
.ds-margin-is-xs { margin-inline-start: var(--ds-space-xs); }
.ds-margin-is-s { margin-inline-start: var(--ds-space-s); }
.ds-margin-is-m { margin-inline-start: var(--ds-space-m); }
.ds-margin-is-l { margin-inline-start: var(--ds-space-l); }
.ds-margin-is-xl { margin-inline-start: var(--ds-space-xl); }
.ds-margin-is-auto { margin-inline-start: auto; }

/* Margin inline end (right in LTR) */
.ds-margin-ie-xs { margin-inline-end: var(--ds-space-xs); }
.ds-margin-ie-s { margin-inline-end: var(--ds-space-s); }
.ds-margin-ie-m { margin-inline-end: var(--ds-space-m); }
.ds-margin-ie-l { margin-inline-end: var(--ds-space-l); }
.ds-margin-ie-xl { margin-inline-end: var(--ds-space-xl); }
.ds-margin-ie-auto { margin-inline-end: auto; }

/* Layout utilities */
/* Stack (Flexbox) */
.ds-stack {
  display: flex;
  flex-direction: column;
}

.ds-stack-horizontal {
  display: flex;
  flex-direction: row;
}

/* Gap utilities */
.ds-gap-xs { gap: var(--ds-space-xs); }
.ds-gap-s { gap: var(--ds-space-s); }
.ds-gap-m { gap: var(--ds-space-m); }
.ds-gap-l { gap: var(--ds-space-l); }
.ds-gap-xl { gap: var(--ds-space-xl); }
.ds-gap-xxl { gap: var(--ds-space-xxl); }

/* Justify content */
.ds-justify-start { justify-content: flex-start; }
.ds-justify-center { justify-content: center; }
.ds-justify-end { justify-content: flex-end; }
.ds-justify-between { justify-content: space-between; }
.ds-justify-around { justify-content: space-around; }
.ds-justify-evenly { justify-content: space-evenly; }

/* Align items */
.ds-items-start { align-items: flex-start; }
.ds-items-center { align-items: center; }
.ds-items-end { align-items: flex-end; }
.ds-items-stretch { align-items: stretch; }
.ds-items-baseline { align-items: baseline; }

/* Grid utilities */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.ds-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.ds-grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

/* Container utilities */
.ds-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--ds-space-m);
}

.ds-container-s {
  max-width: 768px;
  margin-inline: auto;
  padding-inline: var(--ds-space-m);
}

.ds-container-l {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--ds-space-m);
}

/* Color utilities */
.ds-color-text { color: var(--ds-color-text); }
.ds-color-text-weak { color: var(--ds-color-text-weak); }
.ds-color-text-weaker { color: var(--ds-color-text-weaker); }
.ds-color-text-weakest { color: var(--ds-color-text-weakest); }
.ds-color-text-on-accent { color: var(--ds-color-text-on-accent); }
.ds-color-text-error { color: var(--ds-color-text-error); }
.ds-color-text-success { color: var(--ds-color-text-success); }
.ds-color-text-warning { color: var(--ds-color-text-warning); }
.ds-color-text-info { color: var(--ds-color-text-info); }

/* Background color utilities */
.ds-color-surface { background-color: var(--ds-color-surface); }
.ds-color-background { background-color: var(--ds-color-background); }
.ds-color-accent { background-color: var(--ds-color-accent); }
.ds-color-status-success { background-color: var(--ds-color-status-success); }
.ds-color-status-warning { background-color: var(--ds-color-status-warning); }
.ds-color-status-danger { background-color: var(--ds-color-status-danger); }
.ds-color-status-info { background-color: var(--ds-color-status-info); }

/* Border utilities */
.ds-border { border: 1px solid var(--ds-color-border); }
.ds-border-strong { border: 1px solid var(--ds-color-border-strong); }
.ds-border-bs { border-block-start: 1px solid var(--ds-color-border); }
.ds-border-be { border-block-end: 1px solid var(--ds-color-border); }
.ds-border-is { border-inline-start: 1px solid var(--ds-color-border); }
.ds-border-ie { border-inline-end: 1px solid var(--ds-color-border); }

.ds-ut-border-bottom {
  border-bottom: 1px solid var(--ds-color-border);
}


/* Border radius utilities */
.ds-border-radius-xs { border-radius: var(--ds-radius-xs); }
.ds-border-radius-s { border-radius: var(--ds-radius-s); }
.ds-border-radius-m { border-radius: var(--ds-radius-m); }
.ds-border-radius-l { border-radius: var(--ds-radius-l); }
.ds-border-radius-xl { border-radius: var(--ds-radius-xl); }
.ds-border-radius-pill { border-radius: var(--ds-radius-pill); }
.ds-border-radius-circle { border-radius: var(--ds-radius-circle); }

/* Box shadow utilities */
.ds-box-shadow-xs { box-shadow: var(--ds-shadow-xs); }
.ds-box-shadow-s { box-shadow: var(--ds-shadow-s); }
.ds-box-shadow-m { box-shadow: var(--ds-shadow-m); }
.ds-box-shadow-l { box-shadow: var(--ds-shadow-l); }
.ds-box-shadow-xl { box-shadow: var(--ds-shadow-xl); }
.ds-box-shadow-card { box-shadow: var(--ds-shadow-card); }
.ds-box-shadow-modal { box-shadow: var(--ds-shadow-modal); }
.ds-box-shadow-popout { box-shadow: var(--ds-shadow-popout); }

/* Display utilities */
.ds-block { display: block; }
.ds-inline { display: inline; }
.ds-inline-block { display: inline-block; }
.ds-flex { display: flex; }
.ds-inline-flex { display: inline-flex; }
.ds-grid { display: grid; }
.ds-inline-grid { display: inline-grid; }
.ds-hidden { display: none; }

/* Position utilities */
.ds-relative { position: relative; }
.ds-absolute { position: absolute; }
.ds-fixed { position: fixed; }
.ds-sticky { position: sticky; }

/* Overflow utilities */
.ds-overflow-hidden { overflow: hidden; }
.ds-overflow-auto { overflow: auto; }
.ds-overflow-scroll { overflow: scroll; }

/* Divider utility */
.ds-divider {
  border: none;
  height: 1px;
  background-color: var(--ds-color-border);
  margin: var(--ds-space-m) 0;
}

.ds-divider-vertical {
  width: 1px;
  height: auto;
  background-color: var(--ds-color-border);
  margin: 0 var(--ds-space-m);
}

/* Form utilities */
.ds-label {
  display: block;
  font-weight: var(--ds-font-weight-medium);
  margin-bottom: var(--ds-space-xs);
  color: var(--ds-color-text);
}

.ds-input {
  display: block;
  width: 100%;
  padding: var(--ds-space-s) var(--ds-space-m);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-s);
  background-color: var(--ds-color-surface);
  color: var(--ds-color-text);
  font-size: var(--ds-font-size-m);
  line-height: var(--ds-line-height-m);
  transition: border-color var(--ds-duration-fast) var(--ds-ease-out);
}

.ds-input:focus {
  border-color: var(--ds-color-accent);
  box-shadow: var(--ds-focus-ring);
}

.ds-hint {
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
  margin-top: var(--ds-space-xs);
}

.ds-error {
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-error);
  margin-top: var(--ds-space-xs);
}