:root {
    --primary-color: #4f46e5;
    --sidebar-color: #ff0000;
    --topbar-color: #ffffff;
    --sidebar-text-color: #ffffff;
    --topbar-text-color: #374151;
    --accent-color: #10b981;
}

/* Frontend Dynamic Styling */
.wizard-header-icon svg {
    stroke: var(--primary-color) !important;
}

.premium-card {
    border-color: color-mix(in srgb, var(--primary-color) 20%, #e5e7eb) !important;
}

.premium-card-footer {
    border-color: color-mix(in srgb, var(--primary-color) 10%, #f3f4f6) !important;
}

/* Dynamic Sidebar Styling */
.sidebar {
    background-color: var(--sidebar-color) !important;
}

.sidebar .menu-link {
    color: var(--sidebar-text-color) !important;
}

.sidebar .menu-link:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.sidebar .menu-link.active {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Dynamic Topbar Styling */
.topbar, .navbar {
    background-color: var(--topbar-color) !important;
    color: var(--topbar-text-color) !important;
}

.topbar .navbar-brand, .topbar .nav-link {
    color: var(--topbar-text-color) !important;
}

/* Dynamic Button Styling */
.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--primary-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--primary-color) 85%, black) !important;
}

.btn-success {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
}

.btn-success:hover {
    background-color: color-mix(in srgb, var(--accent-color) 85%, black) !important;
    border-color: color-mix(in srgb, var(--accent-color) 85%, black) !important;
}

/* Form Controls */
.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 10%, transparent) !important;
}

/* Links */
a {
    color: var(--primary-color);
}

a:hover {
    color: color-mix(in srgb, var(--primary-color) 85%, black);
}
