/* =========================================
   BASE THEME STYLES
   ========================================= */

/* Global Font Styles */
* {
    font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
    font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

h1 {
    font-size: 48px;
    font-weight: 800;
}

h2 {
    font-size: 36px;
    font-weight: 800;
}

h3 {
    font-size: 28px;
    font-weight: 700;
}

h4 {
    font-size: 22px;
    font-weight: 700;
}

h5 {
    font-size: 18px;
    font-weight: 600;
}

h6 {
    font-size: 16px;
    font-weight: 600;
}

button, .btn, a {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 15px;
}

label {
    font-family: 'Inter', 'Poppins', sans-serif;
    font-weight: 600;
}

/* =========================================
   BACKGROUND & ANIMATIONS
   ========================================= */

body {
    background: linear-gradient(135deg, #0a192f 0%, #0d2847 50%, #0a192f 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    position: relative;
    overflow-x: hidden;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(11, 160, 38, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(15, 59, 125, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(11, 160, 38, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    animation: pulseGlow 8s ease-in-out infinite;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(11, 160, 38, 0.03) 2px,
            rgba(11, 160, 38, 0.03) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(11, 160, 38, 0.03) 2px,
            rgba(11, 160, 38, 0.03) 4px
        );
    pointer-events: none;
    z-index: 0;
    animation: slideGrid 20s linear infinite;
}

@keyframes slideGrid {
    0% { transform: translate(0, 0); }
    100% { transform: translate(4px, 4px); }
}

.wrapper {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* =========================================
   LIGHT MODE
   ========================================= */

body.light {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 50%, #f5f7fa 100%);
    background-size: 400% 400%;
    animation: gradientShiftLight 15s ease infinite;
}

@keyframes gradientShiftLight {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body.light::before {
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(11, 160, 38, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(15, 59, 125, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(11, 160, 38, 0.04) 0%, transparent 50%);
}

body.light::after {
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(100, 100, 100, 0.02) 2px,
            rgba(100, 100, 100, 0.02) 4px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 2px,
            rgba(100, 100, 100, 0.02) 2px,
            rgba(100, 100, 100, 0.02) 4px
        );
}

/* =========================================
   UTILITIES
   ========================================= */

body.boxed {
    background: url('../images/bg.png');
    background-attachment: fixed;
}

body.modal-open {
    overflow: hidden;
    padding-right: 0 !important;
}