[data-theme="dark"] {
    --logo-color: rgb(255, 214, 10);
    --icon-color: #c9c9c7;
    --bg-color: #3f3f3f;
    --text-color: var(--dark-theme-text);

    --card-bg-color: #514f4f;
    --card-text-color: #ffffff;

    --input-bg-color: #c6c4c4;
    --input-text-color: #000000;
    --input-border-color: #c6c4c4;

    --dark-bg-color: #000000;
}

[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);

}

[data-theme="dark"] .card {
    background: rgb(104, 103, 103);
    border-radius: 8px;
    border-color: rgb(104, 103, 103) !important;
    box-shadow: 0 5px 13px rgba(169, 168, 168, 0.2);
    padding: var(--spacing-md);
}

[data-theme="dark"] p,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--text-color) !important;
}

[data-theme="dark"] .btn-primary {
    color: var(--text-color);
    border: none;
    background: #696666;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 1px 2px #0000004d, 0 2px 6px 2px #00000026;
    border-radius: 12px;
    padding: 5px 10px;
}

[data-theme="dark"] .btn-primary-rounded {
    color: var(--dark-theme-text);
    border: none;
    background: #525151;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 1px 2px #0000004d, 0 2px 6px 2px #00000026;
    border-radius: 50%;
    padding: 10px 10px;
}

[data-theme="dark"] .btn-primary:hover {
    color: var(--dark-theme-text);
    background: var(--dark-theme-hover);
}

[data-theme="dark"] .btn-primary-rounded:hover {
    color: var(--dark-theme-text);
    background: var(--dark-theme-hover);
}

[data-theme="dark"] .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(201, 199, 199);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}