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

.theme-on-primary {
    color: var(--color-on-primary) !important;
}
.theme-on-primary-hover:hover {
    color: var(--color-on-primary) !important;
}

.theme-bg-accent {
    background-color: var(--e-global-color-accent) !important;
}
.theme-border-accent {
    border-color: var(--e-global-color-accent) !important;
}

.theme-on-accent {
    color: var(--color-on-accent) !important;
}

.theme-bg-surface {
    background-color: var(--color-surface) !important;
}
.theme-on-surface {
    color: var(--color-on-surface) !important;
}

.theme-bg-surface-shade-1 {
    background-color: var(--color-surface-shade-1) !important;
}
.theme-on-surface-shade-1 {
    color: var(--color-on-surface-shade-1) !important;
}

.theme-bg-surface-shade-2 {
    background-color: var(--color-surface-shade-2) !important;
}
.theme-on-surface-shade-2 {
    color: var(--color-on-surface-shade-2) !important;
}

:root {
    --color-primary: #416ba9;
    --color-on-primary: #ffffff;

    --color-on-accent: #ffffff;

    --color-surface: #ffffff;
    --color-on-surface: #000000;

    --color-surface-shade-1: #e4e4e4;
    --color-on-surface-shade-1: #000000;

    --color-surface-shade-2: #dedede;
    --color-on-surface-shade-2: #000000;
}