/**
 * Common Utility Classes
 * Reusable utility classes for spacing, text alignment, colors, etc.
 */

/* Text Alignment */
.text-center {
    text-align: center;
}

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

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

/* Text Sizes */
.text-large {
    font-size: 1.3rem;
}

.text-small {
    font-size: 0.9rem;
}

/* Spacing Utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.mx-auto { margin-left: auto; margin-right: auto; }

.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 1.5rem; }
.p-4 { padding: 2rem; }

/* Display Utilities */
.d-flex {
    display: flex;
}

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

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

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

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

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

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

/* Width Utilities */
.w-full { width: 100%; }
.w-auto { width: auto; }
.max-w-600 { max-width: 600px; }
.max-w-800 { max-width: 800px; }

/* Color Utilities */
.text-white {
    color: var(--white, #fff);
}

.text-black {
    color: var(--black, #1a1a1a);
}

.text-accent {
    color: var(--accent, #FF6B35);
}

.bg-white {
    background-color: var(--white, #fff);
}

.bg-black {
    background-color: var(--black, #1a1a1a);
}

.bg-accent {
    background-color: var(--accent, #FF6B35);
}

/* Border Utilities */
.rounded {
    border-radius: 8px;
}

.rounded-full {
    border-radius: 50%;
}

/* Shadow Utilities */
.shadow-sm {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.shadow-md {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.shadow-lg {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Visibility */
.hidden {
    display: none;
}

.visible {
    display: block;
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .hidden-mobile {
        display: none;
    }

    .visible-mobile {
        display: block;
    }
}

@media (min-width: 769px) {
    .hidden-desktop {
        display: none;
    }

    .visible-desktop {
        display: block;
    }
}