:root {
    --bg-page:        #ffffff;
    --bg-section:     #f8f7f3;
    --bg-card:#f9f9ff;
    --bg-card-hover:  #ffffff;
    --bg-block-line:rgb(255, 254, 236);

    --input-focus-border:rgb(68, 68, 68);
    --border-soft:    #cacaca;
    --border-card:    #e9e9ea;

    --text-primary:   #1a2233;
    --text-muted:     #686b73;
    --text-unit:      #6a7c9b;
    --text-price-produits: rgb(0, 68, 255);

    --accent-blue:    #2f6bff;
    --accent-green:   #18b26b;
    --accent-orange:  #f5a623;
    --accent-red:     #e5484d;

    --shadow-section: 0 4px 18px rgba(24, 39, 75, 0.08);
    --shadow-card:    0 6px 16px rgba(24, 39, 75, 0.1);

    color-scheme: light;

    /* States escrow */
    --state-success-bg:   #dcfce7;
    --state-success-text: #166534;
    --state-warning-bg:   #fef9c3;
    --state-warning-text: #854d0e;
    --state-info-bg:      #dbeafe;
    --state-info-text:    #1e40af;
    --state-danger-bg:    #fee2e2;
    --state-danger-text:  #991b1b;
}

[data-theme="dark"] {

    --bg-page:        #0e1117;
    --bg-section:     #161b24;
    --bg-card:        #1d232e;
    --bg-card-hover:  #232a37;
    --bg-block-line:#293241;

    --input-focus-border:rgb(214, 214, 214);
    --border-soft:    #232a37;
    --border-card:    #262e3b;

    --text-primary:   #e8ecf3;
    --text-muted:     #8691a3;
    --text-unit:      #6b7689;
    --text-price-produits: rgb(255, 251, 45);

    --accent-blue:    #5b8bff;
    --accent-green:   #2ed88a;
    --accent-orange:  #ffb84d;
    --accent-red:     #ff6b6f;

    --shadow-section: 0 4px 18px rgba(0, 0, 0, 0.35);
    --shadow-card:    0 6px 16px rgba(0, 0, 0, 0.4);

    color-scheme: dark;

    /* ampesain'ny escrow */
    --state-success-bg:   rgba(46, 216, 138, 0.15);
    --state-success-text: #2ed88a;
    --state-warning-bg:   rgba(255, 184, 77, 0.15);
    --state-warning-text: #ffb84d;
    --state-info-bg:      rgba(91, 139, 255, 0.15);
    --state-info-text:    #5b8bff;
    --state-danger-bg:    rgba(255, 107, 111, 0.15);
    --state-danger-text:  #ff6b6f;

}

body {
    background-color: var(--bg-page) !important;
    color: var(--text-primary);
    transition: background-color .25s ease, color .25s ease;
}

[data-theme="dark"] footer,
[data-theme="dark"] footer .navbar,
[data-theme="dark"] footer .bg-white {
    background: var(--bg-section) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-soft) !important;
}

[data-theme="dark"] .flash-slot,
[data-theme="dark"] .alert {
    background-color: var(--bg-section);
    color: var(--text-primary);
    border-color: var(--border-soft);
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-soft);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-soft);
}

[data-theme="dark"] .form-control::placeholder {
color: var(--text-unit);
}

[data-theme="dark"] .text-dark,
[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-primary);
}

[data-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .border,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-top {
    border-color: var(--border-soft) !important;
}            

[data-theme="dark"] .modal-backdrop {
    background-color: #000;
    opacity: .6;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--border-soft);
}

[data-theme="dark"] #flash-slot .alert {
    background-color: var(--bg-card);
    color: var(--text-primary);
    border-color: var(--border-card);
}

[data-theme="dark"] #flash-slot .alert-success {
    border-left: 3px solid var(--accent-green);
}

[data-theme="dark"] #flash-slot .alert-danger {
    border-left: 3px solid var(--accent-red);
}

[data-theme="dark"] #flash-slot .alert-warning {
    border-left: 3px solid var(--accent-orange);
}

[data-theme="dark"] #flash-slot .alert-info {
    border-left: 3px solid var(--accent-blue);
}