:root {
    --primary-color: #007bff;
    --secondary-color: #ffffff;
    --background-color: #f4f4f9;

    --on-primary-color: #ffffff;
    --on-secondary-color: #212529;
    --on-background-color: #212529;
    --box-shadow: 0, 0, 0, 0.1;
    --hover-tr: #f1f1f1;
}

[data-theme="dark"] {
    --primary-color: #0d6efd;
    --secondary-color: #343a40;
    --background-color: #121212;

    --on-primary-color: #ffffff;
    --on-secondary-color: #f8f9fa;
    --on-background-color: #f8f9fa;
    --box-shadow: 255, 255, 255, 0.1;
    --hover-tr: #2f3336;
}

[data-theme="light"] {
    --primary-color: #007bff;
    --secondary-color: #ffffff;
    --background-color: #f4f4f9;

    --on-primary-color: #ffffff;
    --on-secondary-color: #212529;
    --on-background-color: #212529;
    --box-shadow: 0, 0, 0, 0.1;
    --hover-tr: #f1f1f1;
}