/* Theme variables */
:root {
    --custom-bg: #ffffff;
    --custom-text: #000000;
    --custom-border: #dee2e6;
}

[data-bs-theme="dark"] {
    --custom-bg: #212529;
    --custom-text: #f8f9fa;
    --custom-border: #495057;
}

/* Apply theme variables to custom elements */
.custom-element {
    background-color: var(--custom-bg);
    color: var(--custom-text);
    border-color: var(--custom-border);
}

/* Additional custom dark mode styles */
[data-bs-theme="dark"] .alert {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .debug-info {
    background: #2b3035;
    color: #e9ecef;
}