:root {
    --bs-primary: #6F42C1;
    --bs-primary-rgb: 111, 66, 193;
    --bs-link-color: #6F42C1;
    --bs-link-hover-color: #573397;
    --bs-body-color: #313638;
    --bs-body-bg: #E8E9EB;
    --bs-primary: #e8fcc2;
    --bs-secondary: #ff8966;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --color-bg: #F8E9CF;
    --color-surface: #fff9f1;
    --color-surface-alt: #efd8c8;
    --color-surface-hover: #f6e6d8;
    --color-text: #482457;
    --color-text-muted: #6a5773;
    --color-link: #7b3db8;
    --color-link-hover: #5e2e8d;
    --color-border: #CA855A;
    --color-border-strong: #A86A78;
    --color-accent: #A86A78;
    --color-accent-hover: #915664;
    --color-accent-contrast: #ffffff;
    --color-selected-bg: #fff1e6;
    --shadow-color: rgba(0, 0, 0, 0.12);
    --focus-ring-color: rgba(168, 106, 120, 0.35);
    --color-success: #198754;
    --color-danger: #dc3545;
    --color-danger-hover: #b02a37;
    --color-danger-contrast: #ffffff;
    --overlay-color: rgba(0, 0, 0, 0.3);
    --bct-theme: #6F42C1;
    --bct-theme-rgb: 111, 66, 193;
    --bct-theme-text: #FFFFFF;
    --bct-accent: #CBB94C;
    --bct-accent-rgb: 203, 185, 76;
    --bct-accent-text: #111111;
    --bct-gradient-end: #926F95;
    --bct-primary-hover: #623AAA;
    --bct-gradient-hover-end: #806283;
    --bct-primary-active: #59359A;
    --bct-gradient-active-end: #755977;
    --bct-theme-gradient: linear-gradient(135deg, var(--bs-primary), var(--bct-gradient-end));
    --bct-theme-gradient-hover: linear-gradient(135deg, var(--bct-primary-hover), var(--bct-gradient-hover-end));
    --bct-theme-gradient-active: linear-gradient(135deg, var(--bct-primary-active), var(--bct-gradient-active-end));
    --bct-radius: .75rem;
    --bct-border: var(--bs-border-color);
    --bct-shadow: 0 .6rem 1.7rem rgba(111, 66, 193, .10);
    --bct-focus-shadow: 0 0 0 .20rem rgba(111, 66, 193, .14);
    --bct-close-filter: invert(1) grayscale(100%) brightness(200%);
    --theme-color1: var(--bs-primary);
    --theme-color2: var(--bs-body-bg);
    --theme-color3: var(--bs-body-color);
    --theme-color4: var(--bs-secondary);
    --theme-color5: var(--bs-dark);
    --background-image: radial-gradient(var(--bs-primary), var(--bs-body-bg), var(--bs-secondary));
}

    :root[data-theme="dark"] {
        --bs-primary: #7D55C7;
        --bs-primary-rgb: 125, 85, 199;
        --bs-link-color: #9A7BD4;
        --bs-link-hover-color: #B49DDF;
        --bs-body-color: var(--bs-light);
        --bs-body-bg: var(--bs-dark);
        --text-color: var(--bs-light);
        --color-bg: var(--bs-dark);
        --bct-theme: #7D55C7;
        --bct-theme-text: #FFFFFF;
        --bct-accent: #CFBF5A;
        --bct-accent-rgb: 207, 191, 90;
        --bct-accent-text: #111111;
        --bct-gradient-end: #9C7D9E;
        --bct-primary-hover: #8A66CD;
        --bct-gradient-hover-end: #A68AA8;
        --bct-primary-active: #6C49AB;
        --bct-gradient-active-end: #866C88;
        --bct-close-filter: invert(1) grayscale(100%) brightness(200%);
        --background-image: radial-gradient(var(--bs-primary), var(--bs-body-bg), var(--bs-secondary));
    }

:root[data-theme="light"] {
    --bs-primary: #7D55C7;
    --bs-primary-rgb: 125, 85, 199;
    --bs-link-color: #9A7BD4;
    --bs-link-hover-color: #B49DDF;
    --bct-theme: #7D55C7;
    --bct-theme-text: #FFFFFF;
    --bct-accent: #CFBF5A;
    --bct-accent-rgb: 207, 191, 90;
    --bct-accent-text: #111111;
    --bct-gradient-end: #9C7D9E;
    --bct-primary-hover: #8A66CD;
    --bct-gradient-hover-end: #A68AA8;
    --bct-primary-active: #6C49AB;
    --bct-gradient-active-end: #866C88;
    --bct-close-filter: invert(1) grayscale(100%) brightness(200%);
}

:root[data-theme="theme1"] {
    --soft-apricot: #fcd0a1ff;
    --dry-sage: #b1b695ff;
    --jungle-teal: #53917eff;
    --taupe-grey: #63535bff;
    --dark-amaranth: #6d1a36ff;
    --theme-color1: var(--soft-apricot);
    --theme-color2: var(--dry-sage);
    --theme-color3: var(--jungle-teal);
    --theme-color4: var(--taupe-grey);
    --theme-color5: var(--dark-amaranth);
    --background-image: linear-gradient(180deg, var(--theme-color2), var(--theme-color4));
    --color-bg: var(--theme-color1);
    --color-surface: #f8ffea;
    --color-surface-alt: var(--theme-color2);
    --color-surface-hover: #f5f8fa;
    --color-text: var(--theme-color5);
    --color-text-muted: #5c6468;
    --color-link: #0b5cab;
    --color-link-hover: #084680;
    --color-border: var(--theme-color4);
    --color-border-strong: #5f7077;
    --color-accent: var(--theme-color3);
    --color-accent-hover: #e56f4d;
    --color-accent-contrast: #313638;
    --color-selected-bg: #fff2ec;
    --shadow-color: rgba(0, 0, 0, 0.12);
    --focus-ring-color: rgba(255, 137, 102, 0.35);
}

:root[data-theme="default"] {
    --theme-color1: #F8E9CF;
    --theme-color2: #CA855A;
    --theme-color3: #A86A78;
    --theme-color4: #70E070;
    --theme-color5: #482457;
    --background-image: radial-gradient(var(--theme-color1), var(--theme-color2), var(--theme-color3));
    --color-bg: var(--theme-color1);
    --color-surface: #fff9f1;
    --color-surface-alt: #efd8c8;
    --color-surface-hover: #f6e6d8;
    --color-text: var(--theme-color5);
    --color-text-muted: #6a5773;
    --color-link: #7b3db8;
    --color-link-hover: #5e2e8d;
    --color-border: var(--theme-color2);
    --color-border-strong: var(--theme-color3);
    --color-accent: var(--theme-color3);
    --color-accent-hover: #915664;
    --color-accent-contrast: #ffffff;
    --color-selected-bg: #fff1e6;
    --shadow-color: rgba(0, 0, 0, 0.12);
    --focus-ring-color: rgba(168, 106, 120, 0.35);
}

html,
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-image: var(--background-image);
    --bs-body-color: var(--color-text);
    --bs-body-bg: var(--color-bg);
    font-style: normal;
    --font-color: var(--color-text);
    color: var(--color-text);
    background-color: var(--color-bg);
}

.btn-primary {
    color: var(--color-accent-contrast);
    background-color: var(--color-accent);
    border-color: var(--color-accent-hover);
}

    .btn-primary:hover {
        color: var(--color-accent-contrast);
        background-color: var(--color-accent-hover);
        border-color: var(--color-accent);
    }

.btn-secondary {
    color: var(--color-text);
    background-color: var(--color-surface-alt);
    border-color: var(--color-border);
}

    .btn-secondary:hover {
        color: var(--color-text);
        background-color: var(--color-surface-hover);
        border-color: var(--color-border-strong);
    }