/* ============================================
   TLS DESIGN SYSTEM - UNIFORM LAYOUT
   Standardize main container and spacing
   ============================================ */

:root {
    /* Main Container */
    --container-max-width: 1280px;
    
    /* Spacing Scale (Standardized) */
    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Responsive Page Padding */
    --page-padding: 1rem; /* p-4 mobile */

    /* Global Page Background Gradient */
    --tls-bg-gradient: linear-gradient(to bottom right, #E8F4F7 0%, #ffffff 50%, #FFF9EE 100%);
}

body {
    background: var(--tls-bg-gradient) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* Background Blobs */
.background-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
    animation: float 20s ease-in-out infinite;
}

.blob-1 {
    width: 500px;
    height: 500px;
    background: #55A1B4;
    top: -250px;
    left: -250px;
}

.blob-2 {
    width: 400px;
    height: 400px;
    background: #ED843A;
    top: 50%;
    right: -200px;
    animation-delay: -7s;
}

.blob-3 {
    width: 450px;
    height: 450px;
    background: #F8B044;
    bottom: -225px;
    left: 20%;
    animation-delay: -14s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

/* Ensure main layout containers are transparent to show the global background */
.site,
.site-main,
.tls-app,
.tls-main {
    background: transparent !important;
}

@media (min-width: 640px) {
    :root {
        --page-padding: 1.5rem; /* p-6 sm */
    }
}

@media (min-width: 768px) {
    :root {
        --page-padding: 2rem; /* p-8 md */
    }
}

@media (min-width: 1024px) {
    :root {
        --page-padding: 2.5rem; /* p-10 lg */
    }
}

/* Base Layout Classes */
.tls-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent !important;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    margin-left: 320px;
    transition: margin-left 300ms ease-out;
}

@media (min-width: 1024px) {
    .tls-sidebar.collapsed ~ .tls-app-content .tls-main,
    .tls-app-content:has(.tls-sidebar.collapsed) .tls-main {
        margin-left: 96px;
    }
}

@media (max-width: 1023px) {
    .tls-main {
        margin-left: 0;
    }
}

.tls-container {
    width: 100%;
    max-width: var(--container-max-width);
    margin-left: auto;
    margin-right: auto;
    padding: var(--page-padding);
}

/* Sections Spacing */
.section-gap {
    margin-bottom: var(--space-10);
}

@media (min-width: 1024px) {
    .section-gap {
        margin-bottom: var(--space-12);
    }
}

/* Grid Gap Standard */
.grid-gap {
    gap: var(--space-6);
}

@media (min-width: 1024px) {
    .grid-gap {
        gap: var(--space-8);
    }
}