/* ===== UNIVERSAL RSW (RESPONSIVE SCALING WEB) SYSTEM ===== */

:root {
    /* RSW Font Size System */
    --text-xs: clamp(0.75rem, 1.5vw, 0.875rem);
    --text-sm: clamp(0.875rem, 1.8vw, 1rem);
    --text-md: clamp(1rem, 2.2vw, 1.125rem);
    --text-lg: clamp(1.125rem, 2.5vw, 1.375rem);
    --text-xl: clamp(1.375rem, 3vw, 1.75rem);
    --text-xxl: clamp(1.75rem, 4vw, 2.5rem);
    
    /* RSW Spacing System */
    --space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-sm: clamp(0.75rem, 1.5vw, 1rem);
    --space-md: clamp(1rem, 2vw, 1.5rem);
    --space-lg: clamp(1.5rem, 3vw, 2rem);
    --space-xl: clamp(2rem, 4vw, 3rem);
    
    /* RSW Color System */
    --color-bg: #fff;
    --color-text: #222;
    --color-border: #eee;
    --color-hover: #f5f5f5;
    --color-active: #f0f0f0;
    --color-overlay: rgba(255, 255, 255, 0.98);
}

/* ===== BASE LAYOUT RESET ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--color-bg);
    padding-top: clamp(100px, 12vw, 160px);
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

/* ===== RSW CONTAINER SYSTEM ===== */
.rsw-container {
    max-width: clamp(1200px, 90vw, 1600px);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* ===== PROGRESSIVE COLUMN SCALING BREAKPOINTS ===== */

/* 1920px+: 5+ columns (260px min) */
@media (min-width: 1920px) {
    .rsw-grid-1920 {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 2.5rem;
    }
}

/* 1600px+: 4-5 columns (280px min) */
@media (min-width: 1600px) {
    .rsw-grid-1600 {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 2.5rem;
    }
}

/* 1200px+: 3-4 columns (300px min) */
@media (min-width: 1200px) {
    .rsw-grid-1200 {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 2rem;
    }
}

/* 1024px: 3 columns (250px min) */
@media (max-width: 1024px) {
    .rsw-grid-1024 {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 1.5rem;
    }
}

/* 768px: 2-3 columns (220px min) */
@media (max-width: 768px) {
    .rsw-grid-768 {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 1.5rem;
    }
}

/* 640px: 2 columns */
@media (max-width: 640px) {
    .rsw-grid-640 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* 480px: 2 columns */
@media (max-width: 480px) {
    .rsw-grid-480 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* 360px: 1 column */
@media (max-width: 360px) {
    .rsw-grid-360 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ===== RSW UTILITY CLASSES ===== */
.rsw-text-left { text-align: left; }
.rsw-text-center { text-align: center; }
.rsw-text-right { text-align: right; }

.rsw-mt-xs { margin-top: var(--space-xs); }
.rsw-mt-sm { margin-top: var(--space-sm); }
.rsw-mt-md { margin-top: var(--space-md); }
.rsw-mt-lg { margin-top: var(--space-lg); }
.rsw-mt-xl { margin-top: var(--space-xl); }

.rsw-mb-xs { margin-bottom: var(--space-xs); }
.rsw-mb-sm { margin-bottom: var(--space-sm); }
.rsw-mb-md { margin-bottom: var(--space-md); }
.rsw-mb-lg { margin-bottom: var(--space-lg); }
.rsw-mb-xl { margin-bottom: var(--space-xl); }

.rsw-p-xs { padding: var(--space-xs); }
.rsw-p-sm { padding: var(--space-sm); }
.rsw-p-md { padding: var(--space-md); }
.rsw-p-lg { padding: var(--space-lg); }
.rsw-p-xl { padding: var(--space-xl); }

/* ===== RSW ANIMATIONS ===== */
@keyframes rsw-fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rsw-popupIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.rsw-fade-in-up {
    animation: rsw-fadeInUp 0.6s ease forwards;
}

.rsw-popup-in {
    animation: rsw-popupIn 0.5s ease forwards;
}

/* ===== RSW RESPONSIVE HELPERS ===== */
@media (max-width: 768px) {
    .rsw-hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .rsw-hide-desktop {
        display: none !important;
    }
}

/* === IMPORTANT: UNIVERSAL RSW SYSTEM ONLY === */
/* This file should ONLY contain RSW variables, layout, and utility classes */
/* NO typography, NO navigation, NO component styles */