:root{
    --main-font: "Rubik", "Bricolage Grotesque", "Space Grotesk", "Sora", sans-serif;
    --header-font: "Rubik", "Bricolage Grotesque", "Space Grotesk", "Sora", sans-serif;
    --text-color: 0, 0, 0;
    --white: 230,230,230;
    --primary-color: 53, 81, 80;
    --primary-header-color: rgb(var(--text-color));
    --primary-btn-color: var(--primary-color);
    --primary-btn-text-color: var(--white);
    --primary-btn-border-radius: 8px;
    --red-color: #ef8383;
    --grey-color: #868686;
    --lightgrey-color: #9F9F9F;
    --background-color: 235, 235, 235;
    --section-color: #dfdfdf;
    --section-transparency: 0.05;
    --input-color: var(--primary-color);
    --font-size: 18px;
    --chip-color: #D9D9D9;
    --hover-brightness: 95%;
    --focus-brightness: 90%;
    --green-color: 53, 81, 80;
    --carousel-active-color: rgba(186, 180, 180, 0.2);
}


[data-theme="dark"] {
    --text-color: var(--white);
    --primary-color: 70, 107, 106;
    --primary-header-color: var(--lightgrey-color);
    --primary-btn-color: var(--primary-color);
    --primary-btn-text-color: var(--white);
    --primary-btn-border-radius: 8px;
    --red-color: #ef8383;
    --background-color: 22, 22, 22;
    --section-color: #202020;
    --section-transparency: 0.15;
    --input-color: 150, 150, 150;
    --grey-color: #868686;
    --lightgrey-color: #9F9F9F;
    --chip-color: #2F2F2F;
    --hover-brightness: 85%;
    --focus-brightness: 80%;
    --green-color: 70, 107, 106;
    --carousel-active-color: rgba(91, 91, 91, 0.2);
}