:root {
    --bg-color: #f8f9fa;
    --text-color: #212529;
    --card-bg: #ffffff;
    --accent: #6f4e37;
}

[data-theme="dark"] {
    --bg-color: #121212;
    --text-color: #eaeaea;
    --card-bg: #1f1f1f;
    --accent: #c49a6c;
}

body[data-theme="light"] {
    --brand-bg: #f7f3ee;
    --brand-surface: #ffffff;
    --brand-text: #2e2e2e;
    --brand-muted: #7a7a7a;
}

body[data-theme="dark"] {
    --brand-bg: #121212;
    --brand-surface: #1e1e1e;
    --brand-text: #eaeaea;
    --brand-muted: #aaaaaa;

    --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.4);
}

body[data-theme="dark"] .card {
    background-color: #1e1e1e;
    border-color: #2a2a2a;
}

body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4 {
    color: #ffffff;
}

body[data-theme="dark"] .text-muted {
    color: #9ca3af !important;
}


body[data-theme="dark"] .card-title {
    color: #ffffff;
}

body[data-theme="dark"] .btn-outline-secondary {
    color: #e5e5e5;
    border-color: #6b7280;
}

body[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #374151;
    color: #ffffff;
}
body[data-theme="dark"] .navbar {
    background-color: #121212 !important;
    border-color: #2a2a2a;
}

body[data-theme="dark"] .navbar-brand {
    color: #ffffff;
}

body[data-theme="dark"] .navbar-brand:hover {
    color: #e6e6e6;
}

body[data-theme="dark"] .navbar .nav-link {
    color: #cccccc;
}

body[data-theme="dark"] .navbar .nav-link:hover {
    color: #ffffff;
}

body[data-theme="dark"] .navbar .badge {
    background-color: #444;
    color: #ffffff;
}

body[data-theme="dark"] .navbar .btn-outline-primary {
    color: #9ecbff;
    border-color: #9ecbff;
}

body[data-theme="dark"] .navbar .btn-outline-primary:hover {
    background-color: #9ecbff;
    color: #000;
}

body[data-theme="dark"] .navbar .btn-outline-danger {
    color: #ff9e9e;
    border-color: #ff9e9e;
}

body[data-theme="dark"] .navbar .btn-outline-danger:hover {
    background-color: #ff9e9e;
    color: #000;
}

body[data-theme="dark"] .navbar .btn-outline-secondary {
    color: #cccccc;
    border-color: #555;
}

body[data-theme="dark"] .navbar .btn-outline-secondary:hover {
    background-color: #555;
    color: #fff;
}

body[data-theme="dark"] #user-email {
    color: #aaaaaa;
}