:root {
    color-scheme: light;

    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f8f8;
    --theme-bg-tertiary: #f4f4f4;
    --theme-surface: #fefefe;
    --theme-card-bg: #f4f4f4;
    --theme-overlay: rgba(5, 5, 5, 0.4);

    --theme-text-primary: #050505;
    --theme-text-secondary: rgba(5, 5, 5, 0.75);
    --theme-text-muted: rgba(5, 5, 5, 0.6);

    --theme-border: rgba(5, 5, 5, 0.08);
    --theme-border-strong: rgba(5, 5, 5, 0.16);
    --theme-shadow: 0 15px 35px rgba(5, 5, 5, 0.08);

    --theme-accent: #10cc19;
    --theme-accent-contrast: #ffffff;
    --theme-accent-soft: rgba(16, 204, 25, 0.12);

    --theme-input-bg: #ffffff;
    --theme-input-border: rgba(5, 5, 5, 0.2);
    --theme-input-text: #050505;
    --theme-input-placeholder: rgba(5, 5, 5, 0.5);

    --theme-hover-bg: rgba(5, 5, 5, 0.03);
    --theme-hover-border: rgba(5, 5, 5, 0.18);

    --theme-counter-bg: #10cc19;
    --theme-counter-text: #050505;
    --theme-counter-divider: rgba(5, 5, 5, 0.2);
    --theme-contrast-bg: #ffffff;
    --theme-contrast-text: #050505;
    --theme-how-bg: #ffffff;
    --theme-how-overlay: rgba(5, 5, 5, 0.9);
    --theme-testimonial-bg: #ffffff;
    --theme-testimonial-card: #f7f7f7;
    --theme-testimonial-accent: rgba(5, 5, 5, 0.08);
    --theme-how-bg: #ffffff;
    --theme-how-overlay: rgba(5, 5, 5, 0.9);
    --theme-testimonial-bg: #ffffff;
    --theme-testimonial-card: #f7f7f7;
    --theme-testimonial-accent: rgba(5, 5, 5, 0.08);
    
    /* Dashboard specific */
    --theme-dashboard-sidebar: #f4f4f4;
    --theme-dashboard-header: #ffffff;
    --theme-dashboard-body: #ffffff;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --theme-bg-primary: #050505;
    --theme-bg-secondary: #080808;
    --theme-bg-tertiary: #0d0d0d;
    --theme-surface: #0f0f0f;
    --theme-card-bg: #0a0a0a;
    --theme-overlay: rgba(0, 0, 0, 0.65);

    --theme-text-primary: #ffffff;
    --theme-text-secondary: rgba(255, 255, 255, 0.78);
    --theme-text-muted: rgba(255, 255, 255, 0.65);

    --theme-border: rgba(255, 255, 255, 0.08);
    --theme-border-strong: rgba(255, 255, 255, 0.16);
    --theme-shadow: 0 20px 40px rgba(0, 0, 0, 0.65);

    --theme-accent: #10cc19;
    --theme-accent-contrast: #050505;
    --theme-accent-soft: rgba(16, 204, 25, 0.18);

    --theme-input-bg: #0f0f0f;
    --theme-input-border: rgba(255, 255, 255, 0.22);
    --theme-input-text: #ffffff;
    --theme-input-placeholder: rgba(255, 255, 255, 0.5);

    --theme-hover-bg: rgba(255, 255, 255, 0.06);
    --theme-hover-border: rgba(255, 255, 255, 0.16);

    --theme-counter-bg: #10cc19;
    --theme-counter-text: #ffffff;
    --theme-counter-divider: rgba(255, 255, 255, 0.35);
    --theme-contrast-bg: #050505;
    --theme-contrast-text: #ffffff;
    --theme-how-bg: #050505;
    --theme-how-overlay: rgba(0, 0, 0, 0.85);
    --theme-testimonial-bg: #050505;
    --theme-testimonial-card: #0a0a0a;
    --theme-testimonial-accent: rgba(255, 255, 255, 0.08);
    
    /* Dashboard specific */
    --theme-dashboard-sidebar: #0a0a0a;
    --theme-dashboard-header: #050505;
    --theme-dashboard-body: #050505;
}

:root[data-theme="light"] {
    color-scheme: light;

    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f8f8;
    --theme-bg-tertiary: #f4f4f4;
    --theme-surface: #fefefe;
    --theme-card-bg: #f4f4f4;
    --theme-overlay: rgba(5, 5, 5, 0.4);

    --theme-text-primary: #050505;
    --theme-text-secondary: rgba(5, 5, 5, 0.75);
    --theme-text-muted: rgba(5, 5, 5, 0.6);

    --theme-border: rgba(5, 5, 5, 0.08);
    --theme-border-strong: rgba(5, 5, 5, 0.16);
    --theme-shadow: 0 15px 35px rgba(5, 5, 5, 0.08);

    --theme-accent: #10cc19;
    --theme-accent-contrast: #ffffff;
    --theme-accent-soft: rgba(16, 204, 25, 0.12);

    --theme-input-bg: #ffffff;
    --theme-input-border: rgba(5, 5, 5, 0.2);
    --theme-input-text: #050505;
    --theme-input-placeholder: rgba(5, 5, 5, 0.5);

    --theme-hover-bg: rgba(5, 5, 5, 0.03);
    --theme-hover-border: rgba(5, 5, 5, 0.18);

    --theme-counter-bg: #10cc19;
    --theme-counter-text: #050505;
    --theme-counter-divider: rgba(5, 5, 5, 0.2);
    --theme-contrast-bg: #ffffff;
    --theme-contrast-text: #050505;
}

:root {
    --theme-transition-speed: 0.35s;
    --theme-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base element overrides */

body {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-secondary);
    transition:
        background-color var(--theme-transition-speed) var(--theme-transition-ease),
        color var(--theme-transition-speed) var(--theme-transition-ease);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--theme-text-primary);
    transition: color var(--theme-transition-speed) var(--theme-transition-ease);
}

a,
.nav-link {
    color: var(--theme-text-secondary);
    transition: color var(--theme-transition-speed) var(--theme-transition-ease);
}

a:hover,
.nav-link:hover,
.nav-link.active {
    color: var(--theme-accent);
}

.header,
.navbar {
    background-color: var(--theme-bg-primary);
    border-bottom: 1px solid var(--theme-border);
    transition:
        background-color var(--theme-transition-speed) var(--theme-transition-ease),
        border-color var(--theme-transition-speed) var(--theme-transition-ease);
}

section,
.section,
.banner-section,
.work-section,
.how-work-section,
.faq-section {
    background-color: var(--theme-bg-primary);
    transition: background-color var(--theme-transition-speed) var(--theme-transition-ease);
}

.custom--card,
.card,
.work-item__body,
.testimonial-item,
.blog-item,
.custom--modal .modal-content,
.custom--modal .modal-body,
.table,
.dashboard .dashboard-body,
.dashboard .sidebar {
    background-color: var(--theme-card-bg);
    color: var(--theme-text-secondary);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow);
    transition:
        background-color var(--theme-transition-speed) var(--theme-transition-ease),
        color var(--theme-transition-speed) var(--theme-transition-ease),
        border-color var(--theme-transition-speed) var(--theme-transition-ease),
        box-shadow var(--theme-transition-speed) var(--theme-transition-ease);
}

.footer,
.footer-section,
.cta-section {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-secondary);
    border-top: 1px solid var(--theme-border);
}

.cmn--btn,
.btn.cmn--btn,
.btn--base,
.btn.btn--base {
    background-color: var(--theme-accent);
    color: var(--theme-accent-contrast);
    border-color: var(--theme-accent);
    transition:
        background-color var(--theme-transition-speed) var(--theme-transition-ease),
        color var(--theme-transition-speed) var(--theme-transition-ease),
        border-color var(--theme-transition-speed) var(--theme-transition-ease);
}

.cmn--btn:hover,
.btn.cmn--btn:hover,
.btn--base:hover,
.btn.btn--base:hover {
    background-color: #0da715;
    border-color: #0da715;
    color: var(--theme-accent-contrast);
}

.btn-outline--base,
.btn.btn-outline--base {
    background: transparent;
    color: var(--theme-accent);
    border-color: var(--theme-accent);
}

.btn-outline--base:hover,
.btn.btn-outline--base:hover {
    background: var(--theme-accent);
    color: var(--theme-accent-contrast);
}

input,
select,
textarea,
.form-control,
.form-select {
    background-color: var(--theme-input-bg);
    color: var(--theme-input-text);
    border: 1px solid var(--theme-input-border);
    transition:
        background-color var(--theme-transition-speed) var(--theme-transition-ease),
        color var(--theme-transition-speed) var(--theme-transition-ease),
        border-color var(--theme-transition-speed) var(--theme-transition-ease),
        box-shadow var(--theme-transition-speed) var(--theme-transition-ease);
}

input::placeholder,
textarea::placeholder {
    color: var(--theme-input-placeholder);
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus {
    border-color: var(--theme-accent);
    box-shadow: 0 0 0 3px var(--theme-accent-soft);
}

.badge,
.tag,
.status-badge {
    background-color: var(--theme-accent-soft);
    color: var(--theme-accent);
    border: 1px solid var(--theme-border);
}

.table thead {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
}

.table tbody tr {
    background-color: var(--theme-card-bg);
    color: var(--theme-text-secondary);
    border-color: var(--theme-border);
}

.table tbody tr:hover {
    background-color: var(--theme-hover-bg);
}

.modal-content,
.dropdown-menu,
.offcanvas,
.dropdown-menu.dropdown-menu-end {
    background-color: var(--theme-card-bg);
    color: var(--theme-text-secondary);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow);
}

.dashboard .sidebar-menu a,
.dashboard .sidebar-menu button {
    color: var(--theme-text-secondary);
}

.dashboard .sidebar-menu li.active > a,
.dashboard .sidebar-menu a:hover,
.dashboard .sidebar-menu button:hover {
    color: var(--theme-accent);
}

.theme-gradient,
.gradient-bg,
.gradient-one,
.gradient-two,
.gradient-three,
.gradient-four {
    background: var(--theme-accent);
}

/* Typography accents */
.section-heading__subtitle,
.banner-content__subtitle,
.work-item__content p,
.feature-item__info,
.faq-item__content,
.blog-item__meta,
.footer-item__content,
.text--muted,
.text--light {
    color: var(--theme-text-muted);
}

.section-heading__title,
.banner-content__title,
.counterup-item__title,
.counterup-item__number h3,
.work-item__title,
.how-item__title,
.faq-item__title,
.testimonial-item__name,
.blog-item__title,
.footer-item__title,
.dashboard .card-title {
    color: var(--theme-text-primary);
}

.counterup-item,
.work-item,
.how-item__body,
.feature-item,
.faq-item,
.testimonial-item,
.lottery-card,
.competition-card,
.blog-item,
.contact-item,
.support-card,
.dashboard .card,
.pricing-item,
.cta-card,
.cookies-card {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-border);
    color: var(--theme-text-secondary);
}

.faq-item.active,
.accordion-item.active,
.competition-card:hover {
    border-color: var(--theme-accent);
    box-shadow: var(--theme-shadow);
}

.cart-number {
    background: var(--theme-accent);
    color: var(--theme-accent-contrast);
}

.footer-item__social a {
    background: var(--theme-hover-bg);
    border-color: var(--theme-border);
    color: var(--theme-text-secondary);
}

.footer-item__social a:hover {
    background: var(--theme-accent);
    color: var(--theme-accent-contrast);
    border-color: var(--theme-accent);
}

.pagination .page-item .page-link {
    background: var(--theme-card-bg);
    color: var(--theme-text-secondary);
    border-color: var(--theme-border);
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link:hover {
    background: var(--theme-accent);
    border-color: var(--theme-accent);
    color: var(--theme-accent-contrast);
}

.alert,
.badge--base,
.badge--success,
.status-badge--success {
    background: var(--theme-accent-soft);
    color: var(--theme-accent);
}

.alert-info,
.badge--info {
    background: var(--theme-hover-bg);
    color: var(--theme-text-primary);
    border-color: var(--theme-border);
}

.blockquote,
.testimonial-item {
    border-color: var(--theme-border);
}

.sidebar .form-control,
.sidebar .form-select,
.search-form input {
    background: var(--theme-input-bg);
    border-color: var(--theme-input-border);
    color: var(--theme-input-text);
}

.sidebar .form-control:focus {
    border-color: var(--theme-accent);
}