/* Utilities CSS */

/* Spacing - Margins */
.m-0 {
    margin: 0 !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mt-12 {
    margin-top: 12px !important;
}

.mt-16 {
    margin-top: 16px !important;
}

.mt-24 {
    margin-top: 24px !important;
}

.mt-32 {
    margin-top: 32px !important;
}

.mt-48 {
    margin-top: 48px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-24 {
    margin-bottom: 24px !important;
}

.mb-32 {
    margin-bottom: 32px !important;
}

.mb-48 {
    margin-bottom: 48px !important;
}

.mr-8 {
    margin-right: 8px !important;
}

.mr-16 {
    margin-right: 16px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

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

/* Spacing - Padding */
.p-0 {
    padding: 0 !important;
}

.p-12 {
    padding: 12px !important;
}

.p-16 {
    padding: 16px !important;
}

.p-24 {
    padding: 24px !important;
}

.p-32 {
    padding: 32px !important;
}

.p-40 {
    padding: 40px !important;
}

.px-48 {
    padding-left: 48px !important;
    padding-right: 48px !important;
}

.py-16 {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* Typography */
.text-xs {
    font-size: 0.75rem !important;
}

.text-sm {
    font-size: 0.85rem !important;
}

.text-base {
    font-size: 1rem !important;
}

.text-lg {
    font-size: 1.1rem !important;
}

.text-xl {
    font-size: 1.25rem !important;
}

.text-2xl {
    font-size: 1.5rem !important;
}

.text-3xl {
    font-size: 2rem !important;
}

.text-8xl {
    font-size: 8rem !important;
}

.font-normal {
    font-weight: 400 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

.font-bold {
    font-weight: 700 !important;
}

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

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

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

/* Colors - Text */
.color-primary {
    color: var(--primary) !important;
}

.color-primary-light {
    color: #818cf8 !important;
}

.color-text-main {
    color: var(--text-main) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-white {
    color: white !important;
}

.text-white-90 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.text-white-85 {
    color: rgba(255, 255, 255, 0.85) !important;
}

.text-dark {
    color: #333 !important;
}

.color-purple {
    color: #8b5cf6 !important;
}

.color-purple-light {
    color: #a78bfa !important;
}

.color-green {
    color: #22c55e !important;
}

.color-orange {
    color: #f97316 !important;
}

.color-pink {
    color: #ec4899 !important;
}

.color-accent {
    color: #f59e0b !important;
}

.color-cyan {
    color: #06b6d4 !important;
}

.color-violet {
    color: #a855f7 !important;
}

.color-blue {
    color: #3b82f6 !important;
}

.color-google {
    color: #4285F4 !important;
}

/* Tech Stack Colors */
.color-vue {
    color: #42b883 !important;
}

.color-angular {
    color: #DD0031 !important;
}

.color-html {
    color: #E34F26 !important;
}

.color-css {
    color: #1572B6 !important;
}

.color-sass {
    color: #CC6699 !important;
}

.color-tailwind {
    color: #06B6D4 !important;
}

.color-bootstrap {
    color: #7952B3 !important;
}

.color-js {
    color: #F7DF1E !important;
}

.color-ts {
    color: #3178C6 !important;
}

.color-nestjs {
    color: #E0234E !important;
}

.color-django {
    color: #092E20 !important;
}

.color-flask {
    color: #000000 !important;
}

.color-php {
    color: #777BB4 !important;
}

.color-laravel {
    color: #FF2D20 !important;
}

.color-ruby {
    color: #CC342D !important;
}

.color-java {
    color: #007396 !important;
}

.color-swift {
    color: #FA7343 !important;
}

.color-kotlin {
    color: #3DDC84 !important;
}

.color-firebase {
    color: #FFA000 !important;
}

/* Backgrounds */
.bg-light {
    background: #f8fafc !important;
}

.bg-primary-light-10 {
    background: rgba(79, 70, 229, 0.1) !important;
}

.bg-purple-light-10 {
    background: rgba(139, 92, 246, 0.1) !important;
}

.bg-green-light {
    background: #f0fdf4 !important;
}

.bg-orange-light {
    background: #fff7ed !important;
}

.bg-gradient-gold {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
}

.bg-gradient-orange {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%) !important;
}

/* Gradients */
.gradient-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.gradient-pink {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

.gradient-blue {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}

.gradient-orange-pink {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%) !important;
}

.gradient-teal {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%) !important;
}

.gradient-pastel {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
}

.gradient-rose {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
}

.gradient-peach {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
}

.gradient-sky {
    background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%) !important;
}

/* Layout */
.flex {
    display: flex !important;
}

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

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

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

.hide-mobile {
    display: none !important;
}

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

    .hide-desktop {
        display: none !important;
    }
}

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

/* Components */
.rounded-12 {
    border-radius: 12px !important;
}

.rounded-16 {
    border-radius: 16px !important;
}

.rounded-24 {
    border-radius: 24px !important;
}

.icon-sm {
    font-size: 1.2rem !important;
}

.icon-md {
    font-size: 1.5rem !important;
}

.icon-lg {
    font-size: 2rem !important;
}

.icon-xl {
    font-size: 2.5rem !important;
}

.icon-2xl {
    font-size: 3rem !important;
}

.icon-8xl {
    font-size: 8rem !important;
}

.max-w-800 {
    max-width: 800px !important;
}

/* Dark Mode Overrides */
body.dark-mode .bg-light {
    background: #1e293b !important;
}

body.dark-mode .bg-green-light {
    background: #14532d !important;
}

body.dark-mode .bg-orange-light {
    background: #7c2d12 !important;
}

body.dark-mode .text-dark {
    color: #f8fafc !important;
}