:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --btn-color: #cfd8dc;
}

[data-theme="dark"] {
    --bg-color: #1f1f1f;
    --text-color: #e0e0e0;
    --btn-color: #2e3b4e;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
    font-family: "Helvetica Neue", sans-serif;
    padding: 2rem;
}

.theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 999;
}

section {
    margin-bottom: 2rem;
}

h3 {
    border-bottom: 2px solid #ccc;
    padding-bottom: 0.5rem;
}

.btn-custom {
    margin: 0.5rem;
    min-width: 100px;
}

[data-theme="dark"] .btn-primary {
    background-color: #2c4d66;
}

[data-theme="dark"] .btn-success {
    background-color: #345e45;
}

[data-theme="dark"] .btn-warning {
    background-color: #6b552e;
}

[data-theme="dark"] .btn-info {
    background-color: #345d6b;
}

[data-theme="dark"] .btn-light {
    background-color: #999;
    color: #000;
}