: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-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;

    /* Gradients */
    --nav-gradient-start: #4a6da7;
    --nav-gradient-end: #6f7bd7;
    --nav-hover-bg: rgba(255, 255, 255, 0.15);
    --nav-active-bg: rgba(255, 255, 255, 0.2);
    --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: #4a6da7;
    --secondary-color: #e9ecef;
    --text-color: #2c3e50;
    --light-bg: #f8f9fa;
    --muted-text: #6b7280;
    --link-color: #3b6af0;
    --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);
}

.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);
}