/**
 * Utility Classes
 * ===============
 * Spacing, typography, and other common utilities.
 * These are all generated from design tokens.
 */

@use './variables' as *;

@layer utilities {
  // ============================================================================
  // MARGIN
  // ============================================================================

  @each $name, $value in $spacing-map {
    .m-#{$name} {
      margin: $value;
    }

    .mx-#{$name} {
      margin-left: $value;
      margin-right: $value;
    }

    .my-#{$name} {
      margin-top: $value;
      margin-bottom: $value;
    }

    .mt-#{$name} {
      margin-top: $value;
    }

    .mr-#{$name} {
      margin-right: $value;
    }

    .mb-#{$name} {
      margin-bottom: $value;
    }

    .ml-#{$name} {
      margin-left: $value;
    }
  }

  // ============================================================================
  // PADDING
  // ============================================================================

  @each $name, $value in $spacing-map {
    .p-#{$name} {
      padding: $value;
    }

    .px-#{$name} {
      padding-left: $value;
      padding-right: $value;
    }

    .py-#{$name} {
      padding-top: $value;
      padding-bottom: $value;
    }

    .pt-#{$name} {
      padding-top: $value;
    }

    .pr-#{$name} {
      padding-right: $value;
    }

    .pb-#{$name} {
      padding-bottom: $value;
    }

    .pl-#{$name} {
      padding-left: $value;
    }
  }

  // ============================================================================
  // TYPOGRAPHY
  // ============================================================================

  .text-xs {
    font-size: $font-size-xs;
  }

  .text-sm {
    font-size: $font-size-sm;
  }

  .text-base {
    font-size: $font-size-base;
  }

  .text-lg {
    font-size: $font-size-lg;
  }

  .text-xl {
    font-size: $font-size-xl;
  }

  .text-2xl {
    font-size: $font-size-2xl;
  }

  .text-3xl {
    font-size: $font-size-3xl;
  }

  .font-light {
    font-weight: $font-weight-light;
  }

  .font-normal {
    font-weight: $font-weight-normal;
  }

  .font-medium {
    font-weight: $font-weight-medium;
  }

  .font-semibold {
    font-weight: $font-weight-semibold;
  }

  .font-bold {
    font-weight: $font-weight-bold;
  }

  .leading-tight {
    line-height: $line-height-tight;
  }

  .leading-normal {
    line-height: $line-height-normal;
  }

  .leading-relaxed {
    line-height: $line-height-relaxed;
  }

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

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

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

  // ============================================================================
  // COLORS
  // ============================================================================

  @each $name, $value in $color-map {
    .text-#{$name} {
      color: $value;
    }

    .bg-#{$name} {
      background-color: $value;
    }

    .border-#{$name} {
      border-color: $value;
    }
  }

  // Palette shades: grey, red, yellow, green, blue, purple — 100–900
  // Generates .text-{palette}-{shade} and .bg-{palette}-{shade} for all palettes.
  @each $palette-name, $palette in $palette-maps {
    @each $shade, $value in $palette {
      .text-#{$palette-name}-#{$shade} {
        color: $value;
      }

      .bg-#{$palette-name}-#{$shade} {
        background-color: $value;
      }
    }
  }

  // -- Neutral alias for grey (semantic naming) --
  @each $shade, $value in $color-grey-map {
    .text-neutral-#{$shade} {
      color: $value;
    }

    .bg-neutral-#{$shade} {
      background-color: $value;
    }

    .border-neutral-#{$shade} {
      border-color: $value;
    }
  }

  // ============================================================================
  // SHADOWS
  // ============================================================================

  @each $name, $value in $shadow-map {
    .shadow-#{$name} {
      box-shadow: $value;
    }
  }

  // ============================================================================
  // BORDER RADIUS
  // ============================================================================

  .rounded-none {
    border-radius: 0;
  }

  .rounded-sm {
    border-radius: $border-radius-sm;
  }

  .rounded-md {
    border-radius: $border-radius-md;
  }

  .rounded-lg {
    border-radius: $border-radius-lg;
  }

  .rounded-xl {
    border-radius: $border-radius-xl;
  }

  .rounded-full {
    border-radius: #{$border-radius-full};
  }

  // ============================================================================
  // BORDERS
  // ============================================================================

  .border-thin {
    border-width: $border-width-thin;
    border-style: solid;
  }

  .border-base {
    border-width: $border-width-base;
    border-style: solid;
  }

  .border-thick {
    border-width: $border-width-thick;
    border-style: solid;
  }

  // ============================================================================
  // Z-INDEX
  // ============================================================================

  @each $name, $value in $z-index-map {
    .z-#{$name} {
      z-index: $value;
    }
  }

  // ============================================================================
  // OPACITY
  // ============================================================================

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

  // ============================================================================
  // DISPLAY
  // ============================================================================

  .block {
    display: block;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .hidden {
    display: none;
  }

  // ============================================================================
  // FLEXBOX
  // ============================================================================

  .flex {
    display: flex;
  }

  .flex-row {
    flex-direction: row;
  }

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

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

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

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

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

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

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

  .justify-around {
    justify-content: space-around;
  }

  .justify-evenly {
    justify-content: space-evenly;
  }

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

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

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

  .items-stretch {
    align-items: stretch;
  }

  .items-baseline {
    align-items: baseline;
  }

  .flex-1 {
    flex: 1 1 0%;
  }

  .flex-auto {
    flex: 1 1 auto;
  }

  .flex-none {
    flex: none;
  }

  // ============================================================================
  // GRID
  // ============================================================================

  .grid {
    display: grid;
  }

  @for $i from 1 through 12 {
    .grid-cols-#{$i} {
      grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
    }
  }

  // ============================================================================
  // GAP
  // ============================================================================

  @each $name, $value in $spacing-map {
    .gap-#{$name} {
      gap: $value;
    }

    .gap-x-#{$name} {
      column-gap: $value;
    }

    .gap-y-#{$name} {
      row-gap: $value;
    }
  }

  // ============================================================================
  // TRANSITIONS & ANIMATIONS
  // ============================================================================

  .transition-all {
    transition: all 0.2s ease-in-out;
  }

  .transition-colors {
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  }

  .transition-opacity {
    transition: opacity 0.2s ease-in-out;
  }

  .duration-100 { transition-duration: 100ms; }
  .duration-200 { transition-duration: 200ms; }
  .duration-300 { transition-duration: 300ms; }
}