:root {
    /* Base tonality: light */
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-surface-2: #edf2f7;
    --color-surface-3: #e6e9ef;
    --color-text: #1f2933;
    --color-muted: #4b5563;
    --color-border: #d8dde3;
    --color-link: #3b6af0;
    --color-link-visited: #334eac;

    /* Accents */
    --color-accent: #4a6da7;
    --color-accent-strong: #3b5fb8;
    --color-accent-contrast: #ffffff;

    /* Success / warning / danger / info */
    --success-color: #16a34a;
    --danger-color: #dc2626;
    --warning-color: #f59e0b;
    --info-color: #2563eb;
    --success-color-rgb: 22, 163, 74;
    --danger-color-rgb: 220, 38, 38;
    --warning-color-rgb: 245, 158, 11;
    --info-color-rgb: 37, 99, 235;
    --muted-color-rgb: 108, 117, 125;

    /* Amounts */
    --amount-positive: #16a34a;
    --amount-negative: #c53030;

    /* Cards / tables */
    --card-bg: #ffffff;
    --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    --card-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.12);
    --card-border: rgba(0, 0, 0, 0.06);
    --card-border-radius: 16px;
    --table-header-bg: #eef1f5;
    --table-hover-bg: rgba(0, 0, 0, 0.04);
    --table-text: #1f2933;
    --table-border: rgba(0, 0, 0, 0.1);

    /* Inputs / dropdowns */
    --input-bg: #ffffff;
    --input-text: #1f2933;
    --dropdown-bg: #ffffff;
    --dropdown-text: #1f2933;

    /* Select chevron (used by some templates) */
    --select-chevron: url("data:image/svg+xml;charset=utf8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%234b5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");

    /* Gradients */
    --nav-gradient-start: #4a6da7;
    --nav-gradient-end: #6f7bd7;
    --nav-text: #ffffff;
    --nav-hover-bg: rgba(255, 255, 255, 0.15);
    --nav-active-bg: rgba(255, 255, 255, 0.2);
    --nav-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    --primary-gradient: linear-gradient(135deg, #4a6da7 0%, #6f7bd7 100%);
    --success-gradient: linear-gradient(135deg, #3ac381 0%, #16a34a 100%);
    --warning-gradient: linear-gradient(135deg, #f6c344 0%, #f59e0b 100%);
    --danger-gradient: linear-gradient(135deg, #f87171 0%, #dc2626 100%);
    --info-gradient: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);

    /* Modern accent set */
    --success-modern: #16a34a;
    --danger-modern: #dc2626;
    --warning-modern: #f59e0b;
    --info-modern: #2563eb;

    /* Text variants */
    --text-primary: #1f2933;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --bg-primary: #f5f6f8;
    --bg-secondary: #edf2f7;

    /* Legacy aliases (for existing templates) */
    --primary-color: var(--color-accent);
    --secondary-color: var(--color-surface-2);
    --text-color: var(--color-text);
    --light-bg: var(--color-bg);
    --muted-text: var(--text-muted);
    --link-color: var(--color-link);
    --border-color: var(--color-border);
    --table-hover: var(--table-hover-bg);

    /* Transactions list helpers */
    --tx-upcoming-bg: rgba(0, 0, 0, 0.035);
    --tx-upcoming-bg-hover: rgba(0, 0, 0, 0.055);
    --tx-separator-line: rgba(0, 0, 0, 0.18);

    /* Transactions classification palette */
     /* HomeBank classification palette (semantic)
         obligatoire  -> Engagé
         necessaire   -> Essentiel
         confort      -> Résiliable
         superflu     -> Plaisir variable
         exceptionnel -> Exceptionnel
         revenu recurrent -> Revenu récurrent
     */
     --hb-class-obligatoire: #dc2626;
     --hb-class-obligatoire-rgb: 220, 38, 38;
     --hb-class-necessaire: #d97706;
     --hb-class-necessaire-rgb: 217, 119, 6;
     --hb-class-confort: #16a34a;
     --hb-class-confort-rgb: 22, 163, 74;
     --hb-class-superflu: #2563eb;
     --hb-class-superflu-rgb: 37, 99, 235;
     --hb-class-exceptionnel: #8b5cf6;
     --hb-class-exceptionnel-rgb: 139, 92, 246;
     --hb-class-revenu-recurrent: #0f766e;
     --hb-class-revenu-recurrent-rgb: 15, 118, 110;

     /* Optional soft backgrounds (cards / chips) */
     --hb-class-obligatoire-bg: rgba(var(--hb-class-obligatoire-rgb), 0.10);
     --hb-class-necessaire-bg: rgba(var(--hb-class-necessaire-rgb), 0.10);
     --hb-class-confort-bg: rgba(var(--hb-class-confort-rgb), 0.10);
     --hb-class-superflu-bg: rgba(var(--hb-class-superflu-rgb), 0.10);
     --hb-class-exceptionnel-bg: rgba(var(--hb-class-exceptionnel-rgb), 0.10);
     --hb-class-revenu-recurrent-bg: rgba(var(--hb-class-revenu-recurrent-rgb), 0.10);

     /* Backwards-compatible tokens used by transactions list */
     --tx-important-100: var(--hb-class-obligatoire);
     --tx-important-60:  var(--hb-class-necessaire);
     --tx-adjustable-60: var(--hb-class-confort);
     --tx-adjustable-30: var(--hb-class-superflu);
     --tx-exceptional:   var(--hb-class-exceptionnel);
     --tx-exceptional-rgb: var(--hb-class-exceptionnel-rgb);
     --tx-income-80:     var(--hb-class-revenu-recurrent);
    --tx-pill-on-dark:  #ffffff;
    --tx-pill-on-light: #1f2933;

    /* Derived RGB (for Bootstrap helpers) */
    --surface-0-rgb: 245, 246, 248; /* --color-bg */
    --surface-1-rgb: 255, 255, 255; /* --color-surface */
    --surface-2-rgb: 237, 242, 247; /* --color-surface-2 */
    --surface-3-rgb: 230, 233, 239; /* --color-surface-3 */
    --accent-rgb: 74, 109, 167; /* --color-accent */

    /* Bootstrap variable bridge (so .bg-light, .text-muted, etc. match our theme) */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text);
    --bs-secondary-color: var(--color-muted);
    --bs-border-color: var(--color-border);
    --bs-card-bg: var(--card-bg);
    --bs-light-rgb: var(--surface-2-rgb);
    --bs-primary-rgb: var(--accent-rgb);
    --bs-primary: var(--color-accent);
    --bs-link-color: var(--color-link);
    --bs-link-hover-color: var(--color-link-visited);
}

.modal-content {
    background-color: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: var(--card-shadow);
}

.form-control, .form-select, .input-group-text, .btn-outline-secondary {
    background-color: var(--input-bg);
    color: var(--input-text);
    border: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.form-control:focus, .form-select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 0.15rem rgba(var(--info-color-rgb), 0.2);
}

.form-control::placeholder {
    color: var(--color-muted);
    opacity: 0.9;
}

.form-control:hover, .form-select:hover {
    border-color: rgba(0, 0, 0, 0.3);
}

.input-group-text {
    color: var(--color-muted);
}