/* Design tokens: the single source of every design colour, for NiceGUI and React pages alike. What each one is for:
   docs/webform_design.md, "Colours". NiceGUI loads this file on every page at startup (run_nicegui.py); React links it
   in base.html. Nothing else defines a --wf-* value. */
:root {
    --wf-primary: #426592;
    --wf-primary-text: #2f4a6e;
    --wf-primary-border: #36557c;
    --wf-accent: #E66C4D;
    --wf-accent-text: #c94f31;
    --wf-accent-light: #fbe9e4;
    --wf-accent-light-border: #f4bdaf;
    --wf-page-bg: #F5F7FA;
    --wf-card-bg: #ffffff;
    --wf-card-border: #e3e6eb;
    --wf-header-bg: #e2e9f2;
    --wf-heading: #1D324D;
    --wf-heading-border: #14243a;
    --wf-text: #1f2328;
    --wf-label: #566070;
    --wf-faint-text: #8a93a1;
    --wf-field-border: #cfd5dd;
    --wf-readonly-bg: #f7f8fa;
    --wf-row-line: #eef0f3;
    --wf-tint: #eef2f7;
    --wf-tint-border: #d3deeb;
    --wf-option-selected: #eef3f9;
    --wf-search-hit: #ffe08a;
    --wf-error: #b3261e;
    --wf-icon-muted: #6b7586;
    --wf-edit: #f08418;
    --wf-edit-border: #c25f08;
    --wf-delete: #c94f31;
    --wf-delete-border: #a53c23;
    --wf-save: #10b017;
    --wf-save-border: #0c8a12;
    --wf-save-text: #0c6b10;
    --wf-danger: #ce1a1a;
    --wf-danger-border: #a31515;
    --wf-draft: #538668;
    --wf-draft-border: #416b53;
    --wf-back: #5f6b7a;
    --wf-back-border: #4b5563;
    --wf-cancel-border: #b6bdc8;
    --wf-modal-close: #d5dde8;
    --wf-unsaved: #e21c1c;
    --wf-tag-text: #3b4656;
    --wf-placeholder: #9ca3af;
    --wf-focus-ring: 0 0 0 3px rgba(66, 101, 146, 0.22);
    --wf-modal-radius: 10px;
    --wf-modal-shadow: 0 12px 32px rgba(16, 24, 40, 0.22);
    --wf-backdrop: rgba(0, 0, 0, 0.4);

    /* Motion: Quasar's own timings, which the CRUD pages use, so React pages move the same way */
    --wf-modal-duration: 0.3s;                                   /* a modal zooming in from the centre, or out */
    --wf-modal-easing: cubic-bezier(0.215, 0.61, 0.355, 1);
    --wf-shake-duration: 0.15s;                                  /* a modal pulsing when the page behind it is clicked */
    --wf-shake-easing: cubic-bezier(0.25, 0.8, 0.25, 1);
    --wf-hover-easing: cubic-bezier(0.25, 0.8, 0.5, 1);          /* the hover and focus overlay of buttons and tabs */
    --wf-ripple-easing: cubic-bezier(0.4, 0, 0.2, 1);            /* the click ripple of buttons and tabs */

    /* Tooltips (Quasar's look at the CRUD pages' 13px) */
    --wf-tooltip-bg: #757575;
    --wf-tooltip-text: #fafafa;
    --wf-tooltip-font-size: 13px;

    /* Notifications (snackbars): Quasar's notify colours */
    --wf-notify-positive: #21ba45;
    --wf-notify-negative: #c10015;
    --wf-notify-warning: #f2c037;
    --wf-notify-warning-text: #1d1d1d;
    --wf-notify-info: #31ccec;
    --wf-notify-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);

    /* Tab switches slide like Quasar's animated tab panels: its default duration and easing */
    --wf-tab-slide-duration: 0.3s;
    --wf-tab-slide-easing: cubic-bezier(0.215, 0.61, 0.355, 1);

    /* Tabs and segmented controls ("Tabs", "Selection") */
    --wf-tab-text: #47566b;
    --wf-tab-strip-line: #cdd6e2;
    --wf-selection-subtext: #d6e1ef;

    /* Kind icons and tags ("Shapes"): soft fill, darker symbol of the same hue */
    --wf-kind-system-bg: #47566b;
    --wf-kind-system-fg: #ffffff;
    --wf-kind-custom-bg: #ddd0fa;
    --wf-kind-custom-fg: #4523a0;
    --wf-kind-scoped-bg: #d8ecff;
    --wf-kind-scoped-fg: #114a7a;
    --wf-kind-scoped-border: #9fcbff;
    --wf-kind-unscoped-bg: #cdeccf;
    --wf-kind-unscoped-fg: #146c1a;
    --wf-kind-external-bg: #ecdcc8;
    --wf-kind-external-fg: #6b4423;
    --wf-kind-approvals-bg: #e3f6e4;
    --wf-kind-approvals-fg: #0c8a12;

    /* File type icons (the exports menu): a soft colour per type on the grey tint tile */
    --wf-file-sheet: #43a35c;
    --wf-file-pdf: #e0605a;
    --wf-file-archive: #d4952e;
    --wf-file-image: #9172cf;
    --wf-file-doc: #5585c9;

    /* Notice rows ("Modals") */
    --wf-notice-error-bg: #fdecea;
    --wf-notice-error-border: #f1b5af;
    --wf-notice-error-icon: #b3261e;
    --wf-notice-success-bg: #e6f5e7;
    --wf-notice-success-border: #a6d9aa;
    --wf-notice-success-icon: #0c8a12;
    --wf-notice-warning-bg: #fff1de;
    --wf-notice-warning-border: #f3c888;
    --wf-notice-warning-icon: #c25f08;
    --wf-notice-info-bg: #e8eef6;
    --wf-notice-info-border: #b9c9de;
    --wf-notice-text: #4a5361;

    /* Console header menus ("Header menus") */
    --wf-menu-shadow: 0 6px 16px rgba(16, 24, 40, 0.16);         /* a dropdown: the shadow of CRUD's "More" menu */
    --wf-badge-busy: #ffeb3b;                                    /* the export badge on the dark header bar: preparing, or ready */
    --wf-update-tag: #F5CF47;                                    /* the header's refresh-to-update tag, on the dark header bar */
    --wf-header-icon-open: rgba(255, 255, 255, 0.15);            /* a header bar icon whose menu is open */
    --wf-menu-backdrop: rgba(16, 24, 40, 0.28);                  /* the page under an open header dropdown */
    --wf-header-bar-height: 48px;                                /* the dark header bar (.header-bar's toolbar), left undimmed */
}