:root {
    --c-text: #333333;
    --c-bg: #ffffff;
    --c-primary: #F7E7CE;
    --c-secondary: #E4CDA7;
    --c-accent: #F0D9C9;
}

.theme-champagne {
    --c-text: #333333;
    --c-bg: #ffffff;
    --c-primary: #F7E7CE;
    --c-secondary: #E4CDA7;
    --c-accent: #F0D9C9;
}

.theme-jaeger {
    --c-text: #f2ede4;
    --c-bg: #0e1b14;
    --c-primary: #24452f;
    --c-secondary: #d96f32;
    --c-accent: #b55323;
}

.theme-vodka {
    --c-text: #e6e9f0;
    --c-bg: #7391b1;
    --c-primary: #54789a;
    --c-secondary: #36475a;
    --c-accent: #7a2a2e;
}

.theme-mojito {
    --c-text: #e6f0e8;
    --c-bg: #78b796;
    --c-primary: #4b8f6f;
    --c-secondary: #2e5940;
    --c-accent: #a9cbb4;
}

.theme-vin {
    --c-text: #f8f4eb;
    --c-bg: #3b0b0f;
    --c-primary: #7b1e3a;
    --c-secondary: #a98467;
    --c-accent: #e9c46a;
}

.theme-rhum {
    --c-text: #f3e5ab;
    --c-bg: #2e1d14;
    --c-primary: #b87333;
    --c-secondary: #5c4033;
    --c-accent: #7ba05b;
}

.theme-beer {
    --c-text: #faf4e8;
    --c-bg: #3c2f2f;
    --c-primary: #d9a441;
    --c-secondary: #8b5e3c;
    --c-accent: #f4f1ea;
}

.text-main { color: var(--c-text); }
.bg-bg { background-color: var(--c-bg); }
.bg-primary { background-color: var(--c-primary); }
.bg-secondary { background-color: var(--c-secondary); }
.bg-accent { background-color: var(--c-accent); }

body {
    font-family: 'Signika', sans-serif;
    background-color: var(--c-bg);
    color: var(--c-text);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.material-symbols-rounded {
    font-variation-settings:
            'FILL' 0,
            'wght' 300,
            'GRAD' 0,
            'opsz' 24
}

* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.theme-button.active {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.logo-svg {
    color: var(--c-text);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: var(--c-bg);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: var(--c-accent);
    border-radius: 8px;
    border: 2px solid var(--c-bg); /* ajoute un petit contour clair */
    transition: background-color 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--c-secondary);
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--c-primary);
}