:root {
    --bg:               #0f1117;
    --bg-2:             #151820;
    --glass:            rgba(255, 255, 255, 0.04);
    --glass-border:     rgba(255, 255, 255, 0.08);
    --glass-border-hover: rgba(255, 255, 255, 0.12);
    --glass-hover:      rgba(255, 255, 255, 0.07);
    --input-bg:         rgba(255, 255, 255, 0.03);
    --bg-image:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(45, 212, 191, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);

    --accent:           #2dd4bf;
    --accent-dim:       rgba(45, 212, 191, 0.12);
    --accent-glow:      rgba(45, 212, 191, 0.25);
    --accent-border:    rgba(45, 212, 191, 0.2);
    --accent-ring:      rgba(45, 212, 191, 0.08);

    --text:             #f0f4f8;   /* brighter — was #e2e8f0 */
    --text-2:           #a8b8cc;   /* brighter — was #94a3b8 */
    --text-3:           #6b7f96;   /* brighter — was #475569 */

    --debit:            #f87171;
    --debit-dim:        rgba(248, 113, 113, 0.1);
    --debit-border:     rgba(248, 113, 113, 0.2);
    --credit:           #34d399;
    --credit-dim:       rgba(52, 211, 153, 0.1);

    --btn-text:         #0f1117;
    --radius:           14px;
    --radius-sm:        8px;

    --font-display:     'Fraunces', serif;
    --font-ui:          'Nunito', sans-serif;
}

/* ── Readability boosts for dark theme ── */

/* Slightly stronger glass for cards */
.budget-card,
.form-card,
.auth-card,
.tx-item {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Nav items more visible */
.nav-item {
    color: var(--text-2);
}

.nav-item:hover {
    color: var(--text);
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
}

/* Form labels brighter */
.form-label,
.budget-label,
.section-label {
    color: var(--text-3);
    letter-spacing: 0.1em;
}

/* Input text more readable */
input:not([type="checkbox"]), select {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Stronger border on inputs for visibility */
input:not(:focus), select:not(:focus) {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Transaction description more legible */
.tx-desc {
    color: var(--text);
    font-weight: 500;
}

.tx-date {
    color: var(--text-3);
}

/* Budget date and meta */
.budget-date {
    color: var(--text-3);
}

/* Placeholder more visible */
input::placeholder {
    color: rgba(255, 255, 255, 0.2);
}