/* Light mode */

:root {
    /* Inputs */
    --swf-input-bg-color: #ffffff;
    --swf-input-border-color: #c3cbd6;
    --swf-input-font-weight: 600;
    --swf-input-focus-bg: #f4f9ff;
    --swf-input-focus-border-color: #2f6fb5;
    /* The visible keyboard-focus ring. Translucent so it reads as a halo
       around the field rather than a second solid border. */
    --swf-input-focus-ring: rgba(47, 111, 181, 0.30);
    --swf-input-focus-ring-width: 0.2rem;
    --swf-label-bg: #e6ecf3;
    --swf-label-fg: #3c4858;

    /* App bar / menu - same blue family as the form header, so the two
       bars stop competing. Was darkslateblue + steelblue. */
    --swf-nav-bg: #1d3f66;
    --swf-nav-accent: #3573b5;

    /* SwfForm chrome */
    --swf-form-header-bg: linear-gradient(180deg, #3573b5 0%, #245a8d 100%);
    --swf-form-header-fg: #ffffff;
    --swf-form-header-border: #1d3f66;
    --swf-form-body-bg: #ffffff;
    --swf-form-body-border: #d3dce7;
    --swf-form-body-shadow: 0 1px 3px rgba(16, 24, 40, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
    --swf-form-page-btn-color: rgba(255, 255, 255, 0.75);

    /* Tabs (SwfTabContainer) - the active tab and its panel share the form
       body colour so they read as one surface. */
    --swf-tab-bg: #e6ecf3;
    --swf-tab-fg: #3c4858;
    --swf-tab-hover-bg: #d9e4f0;
    --swf-tab-active-fg: #245a8d;
    --swf-tab-accent: #2f6fb5;
    --swf-tab-border: #cdd7e3;

    /* Dialogs (SwfDialogHost) - icon colour per kind. */
    --swf-dlg-info: #2f6fb5;
    --swf-dlg-success: #1f8a4c;
    --swf-dlg-warning: #b7791f;
    --swf-dlg-error: #c0392b;
    --swf-dlg-question: #2f6fb5;

    /* Grid */
    --swf-modal-head-bg: #f4f7fb;
    --swf-grid-head-bg: #eef2f7;
    --swf-grid-head-fg: #2b3a4a;
    --swf-grid-border: #cdd7e3;
    --swf-grid-focus-row-bg: #e7eeff;
    --swf-grid-focus-row-border: #2f6fb5;

    /* Reports (SwfReport) - "ledger navy": the same blue as the form header. */
    --swf-rpt-accent: #245a8d;
    --swf-rpt-stripe: rgba(36, 90, 141, 0.035);
    --swf-rpt-row-hover: rgba(36, 90, 141, 0.07);
    --swf-rpt-rule: #e3e9f0;
    --swf-rpt-group-bg: #f3f7fc;
    --swf-rpt-key-bg: rgba(36, 90, 141, 0.06);
    --swf-rpt-zero: #aab4bf;
    --swf-rpt-neg: #b42318;
}


/* Dark mode */
[data-theme="dark"] {
    --swf-input-bg-color: #2d2d2d;
    --swf-input-border-color: #4a4a4a;
    --swf-input-font-weight: 600;
    --swf-input-focus-bg: #1a3a3a;
    --swf-input-focus-border-color: #4a9eb5;
    --swf-input-focus-ring: rgba(74, 158, 181, 0.35);
    --swf-input-focus-ring-width: 0.2rem;
    --swf-label-bg: #3a3a3a;
    --swf-label-fg: #dbe5ef;

    --swf-nav-bg: #14293d;
    --swf-nav-accent: #2f6fb5;

    --swf-form-header-bg: linear-gradient(180deg, #23455f 0%, #172d3f 100%);
    --swf-form-header-fg: #e8eef5;
    --swf-form-header-border: #0f1e2b;
    --swf-form-body-bg: #1b2631;
    --swf-form-body-fg: #dbe5ef;
    --swf-form-body-border: #3a4652;
    --swf-form-body-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    --swf-form-page-btn-color: rgba(224, 224, 224, 0.70);

    --swf-tab-bg: #263442;
    --swf-tab-fg: #b8c6d4;
    --swf-tab-hover-bg: #2e3f50;
    --swf-tab-active-fg: #7fb0de;
    --swf-tab-accent: #7fb0de;
    --swf-tab-border: #3a4652;

    --swf-dlg-info: #7fb0de;
    --swf-dlg-success: #5cc28a;
    --swf-dlg-warning: #e0b04a;
    --swf-dlg-error: #f28b82;
    --swf-dlg-question: #7fb0de;

    /* Control colours that are inline in the controls as var(--token, <light colour>).
       Only dark mode defines them, so light mode keeps the exact colours it always had. */
    --swf-required-border: #c9784f;
    --swf-combo-list-bg: #1b2631;
    --swf-combo-list-border: #2f6fb5;
    --swf-grid-locked-bg: #4a4424;
    --swf-grid-filter-bg: #3a3a2c;
    --swf-grid-rule: #5b6875;
    --swf-grid-accent: #7fb0de;

    --swf-modal-head-bg: #22303d;
    --swf-grid-head-bg: #263442;
    --swf-grid-head-fg: #dbe5ef;
    --swf-grid-border: #3a4652;
    --swf-grid-focus-row-bg: #1a2a3a;
    --swf-grid-focus-row-border: #4a9eb5;

    --swf-rpt-accent: #7fb0de;
    --swf-rpt-stripe: rgba(255, 255, 255, 0.03);
    --swf-rpt-row-hover: rgba(127, 176, 222, 0.10);
    --swf-rpt-rule: #33404c;
    --swf-rpt-group-bg: #22303d;
    --swf-rpt-key-bg: rgba(127, 176, 222, 0.08);
    --swf-rpt-zero: #5f6b77;
    --swf-rpt-neg: #f28b82;
}