/* ============================================================================
   FILE LOCATION: /assets/css/modern-style.css
   FILE NAME: modern-style.css
   FUNCTION: Modern styles for Shanabau website with yellow/dark theme
   VERSION: 2.0.0
   GENERATED: 2025-10-06
   CHANGELOG:
     v2.0.0 (2025-10-06) - Complete redesign with modern yellow/dark theme
     v1.0.0 (2025-10-06) - Initial stylesheet
   ============================================================================ */

/* ============================================================================
   CSS Variables
   ============================================================================ */
:root {
    --shanabau-primary: #FFCC01;
    --shanabau-primary-dark: #E6B800;
    --shanabau-primary-light: #FFF5B3;
    --shanabau-secondary: #1B2631;
    --shanabau-secondary-light: #34495E;
    --shanabau-dark: #0F1419;
    --shanabau-light: #FAFBFC;
    --shanabau-gray: #5D6D7E;
    --shanabau-gray-light: #AEB6BF;
    --shanabau-success: #27AE60;
    --shanabau-danger: #E74C3C;
    --shanabau-warning: #F39C12;
    --shanabau-info: #3498DB;
    --shanabau-white: #FFFFFF;
    --shanabau-black: #000000;
    
    --shanabau-gradient-primary: linear-gradient(135deg, #FFCC01 0%, #E6B800 100%);
    --shanabau-gradient-dark: linear-gradient(135deg, #1B2631 0%, #34495E 100%);
    --shanabau-gradient-overlay: linear-gradient(135deg, rgba(27, 38, 49, 0.85) 0%, rgba(52, 73, 94, 0.65) 100%);
    
    --shanabau-shadow-light: 0 2px 15px rgba(255, 204, 1, 0.15);
    --shanabau-shadow-medium: 0 5px 25px rgba(255, 204, 1, 0.25);
    --shanabau-shadow-heavy: 0 10px 40px rgba(255, 204, 1, 0.35);
    --shanabau-shadow-dark: 0 5px 20px rgba(15, 20, 25, 0.15);
}

/* ============================================================================
   Global Styles
   ============================================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--shanabau-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

.shanabau-text-primary { color: var(--shanabau-primary) !important; }
.shanabau-text-secondary { color: var(--shanabau-secondary) !important; }
.shanabau-bg-primary { background-color: var(--shanabau-primary) !important; }
.shanabau-bg-secondary { background-color: var(--shanabau-secondary) !important; }

/* ============================================================================
   Responsive Typography
   ============================================================================ */
@media (max-width: 1200px) {
    h1 { font-size: 2.5rem !important; }
    h2 { font-size: 2rem !important; }
    h3 { font-size: 1.5rem !important; }
}

@media (max-width: 768px) {
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }
    h3 { font-size: 1.25rem !important; }
}

@media (max-width: 576px) {
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.1rem !important; }
}

/* ============================================================================
   Animations
   ============================================================================ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ============================================================================
   Utility Classes
   ============================================================================ */
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
.shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }

.fade-in { animation: fadeIn 0.6s ease; }
.fade-in-up { animation: fadeInUp 0.6s ease; }
.fade-in-scale { animation: fadeInScale 0.6s ease; }