// Spacing utilities
$spacers: (
    0: 0,
    1: 0.25rem,
    2: 0.5rem,
    3: 1rem,
    4: 1.5rem,
    5: 3rem
);

@each $key, $value in $spacers {
    // Margin
    .m-#{$key} { margin: $value !important; }
    .mt-#{$key} { margin-top: $value !important; }
    .mb-#{$key} { margin-bottom: $value !important; }
    .ms-#{$key} { margin-left: $value !important; }
    .me-#{$key} { margin-right: $value !important; }
    .mx-#{$key} { 
        margin-left: $value !important;
        margin-right: $value !important;
    }
    .my-#{$key} { 
        margin-top: $value !important;
        margin-bottom: $value !important;
    }

    // Padding
    .p-#{$key} { padding: $value !important; }
    .pt-#{$key} { padding-top: $value !important; }
    .pb-#{$key} { padding-bottom: $value !important; }
    .pl-#{$key} { padding-left: $value !important; }
    .pr-#{$key} { padding-right: $value !important; }
    .px-#{$key} { 
        padding-left: $value !important;
        padding-right: $value !important;
    }
    .py-#{$key} { 
        padding-top: $value !important;
        padding-bottom: $value !important;
    }
}

// Display utilities
$displays: none, inline, inline-block, block, flex, inline-flex, grid;
@each $display in $displays {
    .d-#{$display} { display: $display !important; }
}

// Flex utilities
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

// Justify content
$justify: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly
);

@each $key, $value in $justify {
    .justify-content-#{$key} { justify-content: $value !important; }
}

// Align items
$aligns: (
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch
);

@each $key, $value in $aligns {
    .align-items-#{$key} { align-items: $value !important; }
}

// Text alignment
.text-start { text-align: left !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-justify { text-align: justify !important; }

// Text transform
.text-lowercase { text-transform: lowercase !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

// Font weight
.fw-light { font-weight: 300 !important; }
.fw-normal { font-weight: 400 !important; }
.fw-medium { font-weight: 500 !important; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }

// Position
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

// Width and Height
$sizes: (
    25: 25%,
    50: 50%,
    75: 75%,
    100: 100%,
    auto: auto
);

@each $key, $value in $sizes {
    .w-#{$key} { width: $value !important; }
    .h-#{$key} { height: $value !important; }
}

// Border
.border { border: 1px solid var(--border-color) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--border-color) !important; }
.border-end { border-right: 1px solid var(--border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--border-color) !important; }
.border-start { border-left: 1px solid var(--border-color) !important; }

// Border radius
.rounded { border-radius: var(--border-radius) !important; }
.rounded-0 { border-radius: 0 !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }

// Visibility
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

// Overflow
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

// Background
.bg-transparent { background-color: transparent !important; }

// Shadow
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

// Gap
.gap-0 { gap: 0 !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

// Cursor
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

// User select
.user-select-none { user-select: none !important; }
.user-select-all { user-select: all !important; }
.user-select-auto { user-select: auto !important; }

// Text truncate
.text-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

// Text break
.text-break {
    word-wrap: break-word !important;
    word-break: break-word !important;
}

// Horizontal rule (HR)
hr, .hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid currentColor;
    opacity: 0.25;
}

.hr-thick {
    border-top-width: 2px;
    opacity: 0.5;
}

.hr-dashed {
    border-top-style: dashed;
}

.hr-dotted {
    border-top-style: dotted;
}

// Divider with text
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1rem 0;
    
    &::before,
    &::after {
        content: '';
        flex: 1;
        border-top: 1px solid currentColor;
    }

    &::before {
        margin-right: 1rem;
    }

    &::after {
        margin-left: 1rem;
    }
}

// Grid System
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 1rem;
    padding-left: 1rem;
}

.container-fluid {
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
}

// Responsive containers
@media (min-width: 576px) {
    .container { max-width: 540px; }
}
@media (min-width: 768px) {
    .container { max-width: 720px; }
}
@media (min-width: 992px) {
    .container { max-width: 960px; }
}
@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

// Row
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.75rem;
    margin-left: -0.75rem;

    > * {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}

// Basic columns
.col {
    flex: 1 0 0%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
}

@for $i from 1 through 12 {
    .col-#{$i} {
        flex: 0 0 auto;
        width: percentage($i / 12);
    }
}

// Responsive columns
@media (min-width: 576px) {
    @for $i from 1 through 12 {
        .col-sm-#{$i} {
            flex: 0 0 auto;
            width: percentage($i / 12);
        }
    }
}

@media (min-width: 768px) {
    @for $i from 1 through 12 {
        .col-md-#{$i} {
            flex: 0 0 auto;
            width: percentage($i / 12);
        }
    }
}

@media (min-width: 992px) {
    @for $i from 1 through 12 {
        .col-lg-#{$i} {
            flex: 0 0 auto;
            width: percentage($i / 12);
        }
    }
}

@media (min-width: 1200px) {
    @for $i from 1 through 12 {
        .col-xl-#{$i} {
            flex: 0 0 auto;
            width: percentage($i / 12);
        }
    }
}

// Column order
.order-first { order: -1; }
.order-last { order: 13; }
@for $i from 0 through 12 {
    .order-#{$i} { order: $i; }
}

// Gutters
.g-0 { 
    margin-right: 0;
    margin-left: 0;
    > * {
        padding-right: 0;
        padding-left: 0;
    }
}

.g-1 { 
    margin-right: -0.25rem;
    margin-left: -0.25rem;
    > * {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }
}

.g-2 { 
    margin-right: -0.5rem;
    margin-left: -0.5rem;
    > * {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
}

.g-3 { 
    margin-right: -0.75rem;
    margin-left: -0.75rem;
    > * {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}

.g-4 { 
    margin-right: -1rem;
    margin-left: -1rem;
    > * {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.g-5 { 
    margin-right: -1.5rem;
    margin-left: -1.5rem;
    > * {
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }
}

// Headings
h1, .h1 {
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h2, .h2 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h3, .h3 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h4, .h4 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h5, .h5 {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

h6, .h6 {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

// Heading utilities
.display-1 {
    font-size: 5rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-2 {
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-3 {
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-5 {
    font-size: 3rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-6 {
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
}

// Responsive headings
@media (max-width: 768px) {
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.75rem; }
    h3, .h3 { font-size: 1.5rem; }
    h4, .h4 { font-size: 1.25rem; }
    h5, .h5 { font-size: 1.1rem; }
    h6, .h6 { font-size: 1rem; }

    .display-1 { font-size: 4rem; }
    .display-2 { font-size: 3.5rem; }
    .display-3 { font-size: 3rem; }
    .display-4 { font-size: 2.5rem; }
    .display-5 { font-size: 2rem; }
    .display-6 { font-size: 1.75rem; }
}

// Heading modifiers
.heading-underline {
    border-bottom: 2px solid currentColor;
    padding-bottom: 0.25rem;
}

.heading-overline {
    border-top: 2px solid currentColor;
    padding-top: 0.25rem;
}

.heading-divider {
    display: flex;
    align-items: center;
    &::after {
        content: '';
        flex: 1;
        margin-left: 1rem;
        height: 1px;
        background-color: currentColor;
        opacity: 0.2;
    }
}