/* Color System */
:root {
    --color-background: 232 232 232;
    --color-primary: 255 74 99;
    --color-secondary: 190 76 254;
    --color-accent-primary: 222 165 177;
    --color-accent-secondary: 222 165 254;
    --color-accent-blue-primary: 8 208 255;
    --color-accent-blue-secondary: 131 231 255;
    --color-dark: 58 58 58;
}

.dark-theme {
    --color-background: 25 25 30;
    --color-dark: 232 232 232;
    --color-primary: 255 74 99;
    --color-secondary: 190 76 254;
    --color-accent-primary: 222 165 177;
    --color-accent-secondary: 222 165 254;
    --color-accent-blue-primary: 8 208 255;
    --color-accent-blue-secondary: 131 231 255;
}

/* Base styling */
body {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-dark));
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Utility classes for colors */
.bg-primary {
    background-color: rgb(var(--color-primary));
}
.bg-secondary {
    background-color: rgb(var(--color-secondary));
}
.bg-accent-primary {
    background-color: rgb(var(--color-accent-primary));
}
.bg-accent-secondary {
    background-color: rgb(var(--color-accent-secondary));
}
.bg-accent-blue-primary {
    background-color: rgb(var(--color-accent-blue-primary));
}
.bg-accent-blue-secondary {
    background-color: rgb(var(--color-accent-blue-secondary));
}
.bg-dark {
    background-color: rgb(var(--color-dark));
}
.bg-background {
    background-color: rgb(var(--color-background));
}

.text-primary {
    color: rgb(var(--color-primary));
}
.text-secondary {
    color: rgb(var(--color-secondary));
}
.text-accent-primary {
    color: rgb(var(--color-accent-primary));
}
.text-accent-secondary {
    color: rgb(var(--color-accent-secondary));
}
.text-accent-blue-primary {
    color: rgb(var(--color-accent-blue-primary));
}
.text-accent-blue-secondary {
    color: rgb(var(--color-accent-blue-secondary));
}
.text-dark {
    color: rgb(var(--color-dark));
}
.text-background {
    color: rgb(var(--color-background));
}

/* Button Styles */
.btn-primary {
    background-color: rgb(var(--color-primary));
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(var(--color-primary), 0.4);
}

.btn-secondary {
    background-color: rgb(var(--color-secondary));
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(var(--color-secondary), 0.4);
}

/* Gradients */
.gradient-primary {
    background: linear-gradient(
        45deg,
        rgb(var(--color-primary)),
        rgb(var(--color-secondary))
    );
}

/* Custom navbar styling */
.custom-navbar {
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.dark-theme .custom-navbar {
    background-color: rgb(35, 35, 40);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Cards styling */
.custom-card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.dark-theme .custom-card {
    background-color: rgb(35, 35, 40);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.custom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}