/* ============================================
   Main Stylesheet - Import All Modules
   ============================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&family=Kanit:wght@300;400;500;600;700;800&display=swap');

/* 1. CSS Variables & Design Tokens */
@import url('variables.css');

/* 2. Reset & Base Styles */
@import url('reset.css');

/* 3. Layout */
@import url('layout.css');

/* 4. Components */
@import url('components/buttons.css');
@import url('components/forms.css');
@import url('components/cards.css');
@import url('components/tables.css');
@import url('components/modals.css');
@import url('components/dropdowns.css');

/* 5. Utilities */
@import url('utilities.css');

/* ============================================
   Base Typography
   ============================================ */

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-gray-900);
    background: var(--color-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--font-size-4xl);
}

h2 {
    font-size: var(--font-size-3xl);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
}

p {
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-relaxed);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-primary-dark);
}

/* ============================================
   Container
   ============================================ */

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--spacing-lg);
}

/* ============================================
   Grid System
   ============================================ */

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--spacing-md) * -1);
}

.row.gap-sm {
    gap: var(--spacing-sm);
    margin: 0;
}

.row.gap-md {
    gap: var(--spacing-md);
    margin: 0;
}

.row.gap-lg {
    gap: var(--spacing-lg);
    margin: 0;
}

.row.gap-xl {
    gap: var(--spacing-xl);
    margin: 0;
}

.col {
    flex: 1;
    padding: 0 var(--spacing-md);
}

.col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}

.col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

.col-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}

.col-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}

.col-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes slideInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Animation Classes */
.animate-fadeIn {
    animation: fadeIn var(--transition-base);
}

.animate-slideInUp {
    animation: slideInUp var(--transition-base);
}

.animate-slideInDown {
    animation: slideInDown var(--transition-base);
}

.animate-slideInLeft {
    animation: slideInLeft var(--transition-base);
}

.animate-slideInRight {
    animation: slideInRight var(--transition-base);
}

.animate-zoomIn {
    animation: zoomIn var(--transition-base);
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ============================================
   Responsive Utilities
   ============================================ */

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

@media (min-width: 769px) {
    .show-mobile {
        display: none !important;
    }
}

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

@media (min-width: 1025px) {
    .show-tablet {
        display: none !important;
    }
}