/* Dynamic Theme Variables */
:root {
    --primary-color: #3bafda;
    --secondary-color: #0a79d9;
    --text-color: #444444;
    --heading-color: #1a202c;
    --bg-color: #ffffff;
    --footer-bg: #1a1f2c;
    --body-font: 'Inter', sans-serif;
    --heading-font: 'Plus Jakarta Sans', sans-serif;
    --base-font-size: 16px;
    --btn-radius: 8px;
    --btn-padding: 12px 30px;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--body-font);
    font-size: var(--base-font-size);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    color: var(--heading-color);
}

.th-btn, .btn, button[type="submit"] {
    border-radius: var(--btn-radius) !important;
    padding: var(--btn-padding) !important;
    background-color: var(--primary-color) !important;
}

.th-btn:hover {
    background-color: var(--secondary-color) !important;
}

.footer-wrapper {
    background-color: var(--footer-bg) !important;
}

.text-primary-color {
    color: var(--primary-color) !important;
}

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

/* Add more dynamic overrides as needed */