/**
 * WOS Design System - Frontend Utilities
 * Auto-loaded via design system settings
 */

/* ========================
   CONTAINER UTILITIES
   ======================== */
.wos-container {
  width: 100%;
  max-width: var(--wos-content-width);
  margin-inline: auto;
  padding-inline: var(--wos-space-m);
}

.wos-container--wide {
  max-width: var(--wos-wide-width);
}

.wos-container--narrow {
  max-width: var(--wos-narrow-width);
}

.wos-container--full {
  max-width: 100%;
  padding-inline: 0;
}

/* ========================
   SECTION UTILITIES
   ======================== */
.wos-section {
  padding-block: var(--wos-section-m);
}

.wos-section--s {
  padding-block: var(--wos-section-s);
}

.wos-section--l {
  padding-block: var(--wos-section-l);
}

.wos-section--xl {
  padding-block: var(--wos-section-xl);
}

/* ========================
   FLEX UTILITIES
   ======================== */
.wos-flex {
  display: flex;
}

.wos-flex-col {
  flex-direction: column;
}

.wos-flex-wrap {
  flex-wrap: wrap;
}

.wos-items-start {
  align-items: flex-start;
}

.wos-items-center {
  align-items: center;
}

.wos-items-end {
  align-items: flex-end;
}

.wos-justify-start {
  justify-content: flex-start;
}

.wos-justify-center {
  justify-content: center;
}

.wos-justify-end {
  justify-content: flex-end;
}

.wos-justify-between {
  justify-content: space-between;
}

.wos-gap-xs {
  gap: var(--wos-space-xs);
}

.wos-gap-s {
  gap: var(--wos-space-s);
}

.wos-gap-m {
  gap: var(--wos-space-m);
}

.wos-gap-l {
  gap: var(--wos-space-l);
}

.wos-gap-xl {
  gap: var(--wos-space-xl);
}

/* ========================
   GRID UTILITIES
   ======================== */
.wos-grid {
  display: grid;
  gap: var(--wos-grid-gap);
}

.wos-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.wos-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.wos-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Auto Grid - responsive without breakpoints */
.wos-auto-grid {
  display: grid;
  gap: var(--wos-grid-gap);
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--wos-auto-grid-min, 280px), 100%), 1fr)
  );
}

.wos-auto-grid--sm {
  --wos-auto-grid-min: 200px;
}

.wos-auto-grid--lg {
  --wos-auto-grid-min: 350px;
}

/* ========================
   TEXT UTILITIES
   ======================== */
.wos-text-xs {
  font-size: var(--wos-text-xs);
}

.wos-text-sm {
  font-size: var(--wos-text-sm);
}

.wos-text-md {
  font-size: var(--wos-text-md);
}

.wos-text-lg {
  font-size: var(--wos-text-lg);
}

.wos-text-xl {
  font-size: var(--wos-text-xl);
}

.wos-text-2xl {
  font-size: var(--wos-text-2xl);
}

.wos-text-3xl {
  font-size: var(--wos-text-3xl);
}

.wos-text-4xl {
  font-size: var(--wos-text-4xl);
}

.wos-font-normal {
  font-weight: 400;
}

.wos-font-medium {
  font-weight: 500;
}

.wos-font-semibold {
  font-weight: 600;
}

.wos-font-bold {
  font-weight: 700;
}

.wos-text-left {
  text-align: left;
}

.wos-text-center {
  text-align: center;
}

.wos-text-right {
  text-align: right;
}

/* ========================
   COLOR UTILITIES
   ======================== */
.wos-text-primary {
  color: var(--wos-primary-500);
}

.wos-text-secondary {
  color: var(--wos-secondary-500);
}

.wos-text-accent {
  color: var(--wos-accent);
}

.wos-text-muted {
  color: var(--wos-text-muted);
}

.wos-bg-primary {
  background-color: var(--wos-primary-500);
}

.wos-bg-secondary {
  background-color: var(--wos-secondary-500);
}

.wos-bg-accent {
  background-color: var(--wos-accent);
}

.wos-bg-alt {
  background-color: var(--wos-bg-alt);
}

/* ========================
   COLOR CONTEXT (Auto text color)
   ======================== */
.wos-light-bg {
  --wos-ctx-text: var(--wos-secondary-900);
  --wos-ctx-text-muted: var(--wos-secondary-600);
  --wos-ctx-heading: var(--wos-secondary-950);
  --wos-ctx-link: var(--wos-primary-600);
}

.wos-dark-bg {
  --wos-ctx-text: var(--wos-secondary-100);
  --wos-ctx-text-muted: var(--wos-secondary-300);
  --wos-ctx-heading: #ffffff;
  --wos-ctx-link: var(--wos-primary-300);
}

.wos-light-bg,
.wos-dark-bg {
  color: var(--wos-ctx-text);
}

.wos-light-bg h1,
.wos-light-bg h2,
.wos-light-bg h3,
.wos-light-bg h4,
.wos-light-bg h5,
.wos-light-bg h6,
.wos-dark-bg h1,
.wos-dark-bg h2,
.wos-dark-bg h3,
.wos-dark-bg h4,
.wos-dark-bg h5,
.wos-dark-bg h6 {
  color: var(--wos-ctx-heading);
}

.wos-light-bg a,
.wos-dark-bg a {
  color: var(--wos-ctx-link);
}

/* ========================
   SMART CONTENT SPACING
   ======================== */
.wos-smart-spacing > * {
  margin-top: 0;
  margin-bottom: 0;
}

.wos-smart-spacing > * + * {
  margin-top: var(--wos-content-gap);
}

.wos-smart-spacing > :is(h1, h2, h3, h4, h5, h6) {
  margin-top: calc(var(--wos-content-gap) * 1.5);
}

.wos-smart-spacing > :is(h1, h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* ========================
   RESPONSIVE UTILITIES
   ======================== */
@media (max-width: 1024px) {
  .wos-hide-laptop {
    display: none !important;
  }

  .wos-grid-3,
  .wos-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .wos-hide-tablet {
    display: none !important;
  }

  .wos-grid-2,
  .wos-grid-3,
  .wos-grid-4 {
    grid-template-columns: 1fr;
  }

  .wos-section {
    padding-block: var(--wos-section-s);
  }
}

@media (max-width: 480px) {
  .wos-hide-mobile {
    display: none !important;
  }
}