/*
 * ONFlow design tokens. Every colour, radius and size the app chooses lives here and is
 * mapped onto the variables Bootstrap 5.3 and the Syncfusion bootstrap5.3 theme read, so
 * both libraries change together. Loaded after both libraries: same :root specificity,
 * later wins.
 */
:root {
    --onf-bg: #f5f6f8;
    --onf-surface: #fff;
    --onf-surface-alt: #f8f9fa;
    --onf-border: #dee2e6;
    --onf-text: #212529;
    --onf-text-muted: #6c757d;
    --onf-accent: #0d6efd;
    --onf-accent-subtle: #e7f1ff;

    /* Cash chart (CashDashboard). Same values as Components/Shared/ChartColors.cs: change together. */
    --onf-chart-in: #2f9e6a;
    --onf-chart-out: #e5603f;
    --onf-chart-transfer: #6c757d;
    --onf-chart-balance: #0d6efd;
    --onf-chart-limit: #d62828;

    --onf-radius: 4px;
    --onf-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --onf-font-size: 0.875rem;
    --onf-control-height: 32px;

    --onf-sidebar-width: 240px;
    --onf-header-height: 56px;
    --onf-page-padding-x: 24px;
    --onf-page-padding-top: 16px;

    /* Bootstrap. --bs-body-bg stays white on purpose: cards and inputs paint with it. */
    --bs-body-font-family: var(--onf-font);
    --bs-body-font-size: var(--onf-font-size);
    --bs-body-color: var(--onf-text);
    --bs-secondary-color: var(--onf-text-muted);
    --bs-border-color: var(--onf-border);
    --bs-border-radius: var(--onf-radius);
    --bs-border-radius-sm: var(--onf-radius);
    --bs-border-radius-lg: var(--onf-radius);

    /* Syncfusion bootstrap5.3 theme. */
    --e-font-name: var(--onf-font);
    --color-sf-content-text-color: var(--onf-text);
    --color-sf-border-light: var(--onf-border);
    --color-sf-table-bg-color-hover: var(--onf-surface-alt);
    --color-sf-table-bg-color-selected: var(--onf-accent-subtle);
}