:root {
    /* Primary Colors */
    --primary-color-light: #7186e7;
    --primary-color-dark: #546ff2;
    --secondary-color-light: #e9ce75;
    --secondary-color-dark: #f9c00d;
    /* --primary-pink: #FF8AAE;
    --secondary-pink: #FFB6C1; */
    --primary-pink: #a2b2f8;
    --secondary-pink: #FFB6C1;
    
    /* Accent Colors */
    --accent-color: #9F86C0;
    
    /* Background Colors */
    --background-color: #f0f8ff;
    --card-background: #FFFFFF;
    
    /* Text and Utility Colors */
    --text-color: #333;
    --text-dark: #2c3e50;
    --light-gray: #f5f5f5;
    --gray: #ddd;
    --hover-color: #546ff2;
    --shadow-color: rgba(255, 138, 174, 0.2);
    --pink-shadow: rgba(162, 178, 248, 0.3);
    --blue-shadow: rgba(84, 111, 242, 0.3);

    /* Dermama Logo */
    --dermama-primary-first: #6E87E4;
    --dermama-primary-second: #4F433F;
    --dermama-text: #000000;
    --dermama-secondary-first: #F8C10E;
    --dermama-secondary-second: #FFCB0D;

    /* Dermama IG */
    --dermamaIG-primary-first: #A28D80;
    --dermamaIG-primary-second: #987F72;
    --dermamaIG-text: #2B2B2B;
    --dermamaIG-secondary-first: #968983;
    --dermamaIG-secondary-second: #65544C;

    
    /* Status Colors */
    --success-color: #4CAF50;
    --warning-color: #FFC107;
    --error-color: #F44336;
}

.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.7s;
}

.loader-logo {
    width: 500px;
    height: auto;
    margin-bottom: 20px;
}

.loader-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--dermama-secondary-first);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
}

.loader-text {
    font-family: 'Poppins', sans-serif;
    color: #333;
    font-size: 16px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.content {
    opacity: 0;
    transition: opacity 1s;
}

.content.loaded {
    opacity: 1;
}

@media (max-width: 780px) {
    .loader-logo {
        width: 300px;
    }
}