/* Base styles for the AcePath Quiz Platform */

/* Base Typography */
body {
    font-family: var(--font-primary);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
}

p {
    margin-bottom: var(--spacing-sm);
}

/* Base spacing utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }

/* Base layout utilities */
.d-flex { display: flex; }
.d-block { display: block; }
.d-none { display: none; }
.d-inline-flex { display: inline-flex; }

.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.flex-direction-column { flex-direction: column; }

/* Base transitions */
.transition-base {
    transition: all var(--transition-duration) var(--transition-timing);
}

/* Base box shadow */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

/* Base border radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 50%; }

/* Responsive utilities */
@media (max-width: 767px) {
    .mobile-column {
        flex-direction: column;
    }
}

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