@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
            --color-primary: 22 170 183;
            --color-secondary: 33 139 71;
            --color-accent: 233 246 247;
            --font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans', sans-serif;
            --border-radius: 0.75rem;
            --button-style: square;
        }
        
        body, .font-theme, .theme-font {
            font-family: var(--font-family);
        }
        
        /* 🛡️ PERLINDUNGAN ICON FONT AWESOME DARI OVERRIDE FONT SISTEM */
        .fa, .fas, .far, .fal, .fad, .fab, .fa-solid, .fa-regular, .fa-brands, [class^=\'fa-\'], [class*=\' fa-\'], [class^=\'fa-\']::before, [class*=\' fa-\']::before {
            font-family: \'Font Awesome 6 Free\', \'Font Awesome 6 Brands\', \'Font Awesome 5 Free\', \'Font Awesome 5 Brands\', FontAwesome !important;
            font-style: normal !important;
        }
        .fa-solid, .fas {
            font-family: \'Font Awesome 6 Free\', \'Font Awesome 5 Free\', FontAwesome !important;
            font-weight: 900 !important;
        }
        .fa-regular, .far {
            font-family: \'Font Awesome 6 Free\', \'Font Awesome 5 Free\', FontAwesome !important;
            font-weight: 400 !important;
        }
        .fa-brands, .fab {
            font-family: \'Font Awesome 6 Brands\', \'Font Awesome 5 Brands\', FontAwesome !important;
            font-weight: 400 !important;
        }
        
        /* Update Tailwind config dynamically */
        .theme-primary { color: rgb(var(--color-primary)); }
        .theme-primary-bg { background-color: rgb(var(--color-primary)); }
        .theme-secondary { color: rgb(var(--color-secondary)); }
        .theme-secondary-bg { background-color: rgb(var(--color-secondary)); }
        .theme-accent { color: rgb(var(--color-accent)); }
        .theme-accent-bg { background-color: rgb(var(--color-accent)); }
        
        /* Dynamic button styles */
        .btn-theme-primary {
            background: linear-gradient(135deg, rgb(var(--color-primary)), rgb(var(--color-secondary)));
            color: white;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            border-radius: var(--border-radius);
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        .btn-theme-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        }
        
        .btn-theme-secondary {
            background-color: rgb(var(--color-secondary));
            color: white;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            border-radius: var(--border-radius);
            transition: all 0.3s ease;
        }
        
        .btn-theme-accent {
            background-color: rgb(var(--color-accent));
            color: white;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            border-radius: var(--border-radius);
            transition: all 0.3s ease;
        }
        
        /* Button style variations */
        .btn-rounded { border-radius: var(--border-radius); }
        .btn-square { border-radius: 0.25rem; }
        .btn-pill { border-radius: 9999px; }
        
        /* Dynamic font family */
        .theme-font { font-family: var(--font-family); }
        
        /* Hero gradient with dynamic colors */
        .hero-gradient {
            background: linear-gradient(135deg, 
                rgb(var(--color-primary)) 0%, 
                rgb(var(--color-secondary)) 100%);
        }
        
        /* Card with theme colors */
        .card-theme {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .card-theme:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            transform: translateY(-5px);
        }
        
        /* Dark mode styles */
        [data-theme='dark'] {
            --tw-bg-opacity: 1;
            background-color: rgb(17 24 39 / var(--tw-bg-opacity));
            color: rgb(243 244 246);
        }
        
        [data-theme='dark'] .card-theme {
            background-color: rgb(31 41 55);
            color: rgb(243 244 246);
        }
        
        [data-theme='dark'] .bg-white {
            background-color: rgb(31 41 55) !important;
        }
        
        [data-theme='dark'] .text-gray-900 {
            color: rgb(243 244 246) !important;
        }
        
        [data-theme='dark'] .text-gray-700 {
            color: rgb(209 213 219) !important;
        }
        
        [data-theme='dark'] .border-gray-200 {
            border-color: rgb(55 65 81) !important;
        }
        
        /* Animation controls */
        .no-animations * {
            animation-duration: 0s !important;
            transition-duration: 0s !important;
        }