@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf") format("truetype");
}

@font-face {
    font-display: swap;
    font-family: Inter;
    font-style: italic;
    font-weight: 100 900;
    src: url("../fonts/Inter/Inter-Italic-VariableFont_opsz,wght.ttf") format("truetype");
}

:root {
    --bs-primary: #6172db;
    --bs-primary-rgb: 97, 114, 219;
    --bs-success: #25a77b;
    --bs-success-rgb: 37, 167, 123;
    --bs-info: #7c8dec;
    --bs-info-rgb: 124, 141, 236;
    --bs-danger: #e05a66;
    --bs-danger-rgb: 224, 90, 102;
    --bs-warning: #f2a84a;
    --bs-warning-rgb: 242, 168, 74;
    --bs-body-color: #26324a;
    --bs-body-bg: #f7f8fc;
    --app-font-family: Inter, var(--bs-font-sans-serif);
    --app-bg: #f4f6fb;
    --app-bg-top: #ffffff;
    --app-bg-bottom: #d6dbea;
    --app-body-bg: linear-gradient(180deg, var(--app-bg-top) 0%, var(--app-bg) 40%, var(--app-bg-bottom) 100%);
    --app-login-bg: linear-gradient(180deg, #ffffff 0%, #eef1f8 100%);
    --app-surface: #ffffff;
    --app-surface-soft: #f5f6fb;
    --app-surface-muted: #e9ecf6;
    --app-surface-solid: #ffffff;
    --app-border: #dfe3ef;
    --app-border-soft: #eceff6;
    --app-border-strong: #cdd4e3;
    --app-text: #26324a;
    --app-text-soft: #536078;
    --app-text-muted: #858fa3;
    --app-heading: #22304a;
    --app-accent: #6172db;
    --app-accent-strong: #5263c7;
    --app-primary: #6172db;
    --app-success: #25a77b;
    --app-info: #7c8dec;
    --app-danger: #e05a66;
    --app-warning: #f2a84a;
    --app-navbar: #ffffff;
    --app-sidebar-width: 228px;
    --app-sidebar-bg: #f0f2f8;
    --app-sidebar-border: #dfe3ef;
    --app-sidebar-text: #25304a;
    --app-sidebar-muted: #7e879a;
    --app-sidebar-link-bg: transparent;
    --app-sidebar-link-border: transparent;
    --app-sidebar-link-hover-bg: #e4e8fb;
    --app-sidebar-link-hover-color: #5a68d5;
    --app-sidebar-action-bg: #ffffff;
    --app-sidebar-action-color: #5a68d5;
    --app-sidebar-action-hover-bg: #eef1ff;
    --app-sidebar-danger-bg: rgba(224, 90, 102, .1);
    --app-sidebar-danger-border: rgba(224, 90, 102, .22);
    --app-sidebar-danger-hover-bg: #ffffff;
    --app-sidebar-danger-hover-color: #c94955;
    --app-shadow-sm: 0 1px 2px rgba(38, 50, 74, .05);
    --app-shadow-md: 0 12px 28px rgba(38, 50, 74, .08), 0 1px 2px rgba(38, 50, 74, .05);
    --app-shadow-lg: 0 18px 44px rgba(97, 114, 219, .12);
    --app-radius-sm: .375rem;
    --app-radius-md: .5rem;
    --app-radius-lg: .75rem;
    --app-field-radius: .375rem;
    --app-transition-fast: .18s ease;
    --app-transition-soft: .24s ease;
    --app-table-hover-accent: rgba(97, 114, 219, .14);
    --app-table-header-bg: #eef1fa;
    --app-table-header-color: #5c667b;
    --app-navbar-button-color: #536078;
    --app-navbar-button-border: #dfe3ef;
    --app-navbar-button-bg: #f6f7fb;
    --app-navbar-button-hover-bg: #eef1ff;
    --app-navbar-button-hover-color: #5a68d5;
    --app-navbar-action-bg: #eef1ff;
    --app-navbar-action-color: #5364d0;
    --app-navbar-action-hover-bg: #e3e7ff;
    --app-form-help-border: rgba(133, 143, 163, .34);
    --app-form-help-color: #26324a;
    --app-form-help-bg: rgba(255, 255, 255, .95);
    --app-form-help-hover-bg: #ffffff;
    --app-form-help-hover-border: rgba(97, 114, 219, .42);
    --app-focus-ring: rgba(97, 114, 219, .16);
    --app-success-soft: rgba(37, 167, 123, .1);
    --app-success-border: rgba(37, 167, 123, .26);
    --app-danger-soft: rgba(224, 90, 102, .09);
    --app-danger-border: rgba(224, 90, 102, .26);
    --app-responsive-row-border: rgba(223, 227, 239, .95);
    --app-responsive-row-bg: rgba(255, 255, 255, .96);
    --app-responsive-row-shadow: 0 1px 2px rgba(38, 50, 74, .05);
    --app-responsive-cell-border: rgba(236, 239, 246, .95);
    --app-responsive-label-color: #858fa3;
    --dashboard-soft: #f6f7fb;
    --dashboard-muted-border: var(--app-border);
    --dashboard-income: linear-gradient(180deg, #44bf94, #25a77b);
    --dashboard-expense: linear-gradient(180deg, #ee7580, #e05a66);
    --dashboard-balance: linear-gradient(180deg, #8a98f0, #6172db);
    --dashboard-income-row: rgba(37, 167, 123, .075);
    --dashboard-expense-row: rgba(224, 90, 102, .07);
    --dashboard-income-row-mobile: rgba(37, 167, 123, .1);
    --dashboard-expense-row-mobile: rgba(224, 90, 102, .095);
    --dashboard-lock-border: #f1d497;
    --dashboard-lock-bg: #fff7e6;
    --dashboard-lock-color: #725628;
    --dashboard-pie-swatch-ring: 0 0 0 3px rgba(255, 255, 255, .9);
    --dashboard-pie-shadow: drop-shadow(0 16px 24px rgba(97, 114, 219, .11));
    --dashboard-empty-border: rgba(133, 143, 163, .32);
    --app-chart-1: #6172db;
    --app-chart-2: #25a77b;
    --app-chart-3: #f2a84a;
    --app-chart-4: #e05a66;
    --app-chart-5: #8b7ce8;
    --app-chart-6: #36bdd6;
    --app-chart-7: #f08f61;
}

.app-chart-1 { --app-chart-color: var(--app-chart-1); }
.app-chart-2 { --app-chart-color: var(--app-chart-2); }
.app-chart-3 { --app-chart-color: var(--app-chart-3); }
.app-chart-4 { --app-chart-color: var(--app-chart-4); }
.app-chart-5 { --app-chart-color: var(--app-chart-5); }
.app-chart-6 { --app-chart-color: var(--app-chart-6); }
.app-chart-7 { --app-chart-color: var(--app-chart-7); }