/* ---------------------------------------------------------------------------------------------
   The shared colours, fonts, corner sizes and stacking heights for the whole application.

   Loads before every other stylesheet we wrote, so anything defined here is available to all of
   them. It paints nothing on its own - it only gives names to the values the other stylesheets
   use, so that a colour is changed in one place rather than hunted through four files.

   Bootstrap keeps its own separate set of names beginning "--bs-". Nothing here overrides those.
   --------------------------------------------------------------------------------------------- */

:root {
    /* The two typefaces the application loads from Google Fonts. Body text is set in Inter and
       headings in Plus Jakarta Sans. */
    --font-body: "Inter", sans-serif;
    --font-heading: "Plus Jakarta Sans", sans-serif;

    /* The typeface the support chat widget uses. It deliberately does not load a web font,
       because the widget has to render inside other people's pages where a font request may be
       blocked, so it asks for whatever the reader's own device already has. */
    --font-support-widget: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* The typeface on the printed order pages. */
    --font-order-page: Arial, Helvetica, Verdana, sans-serif;

    /* The brand green, used for buttons, links and the selected tab. */
    --brand-green: #18b26f;

    /* The darker brand green a primary button turns when the pointer is over it. */
    --brand-green-dark: #0b5836;

    /* The pale brand green behind secondary buttons and open accordion headers. */
    --brand-green-pale: #b7e9b0;

    /* The pale green behind a row that has been singled out for the reader's attention. */
    --brand-green-highlight: #cdffc6;

    /* The brand navy, used for navigation links and the selected navigation item. */
    --brand-navy: #23366a;

    /* The deeper navy the audit log is written in. */
    --brand-navy-deep: #2b3e7a;

    /* The lighter navy on an audit entry's date. */
    --brand-navy-light: #5a6fa5;

    /* The muted navy on the "what changed" part of an audit entry. */
    --brand-navy-muted: #4a5a80;

    /* The near-black used for ordinary text on a pale background. */
    --text-dark: #1c1c1c;

    /* The softer grey-black used for text inside tables. */
    --text-table: #383838;

    /* The grey used for text that is present but not the point, such as who made a change. */
    --text-muted: #6c757d;

    /* Plain black, for the printed order pages. */
    --text-black: #000000;

    /* White, for text on a coloured background and for panel backgrounds. */
    --surface-white: #ffffff;

    /* The pale grey behind table headings and light buttons. */
    --surface-light: #f6f6f6;

    /* The grey behind a field the reader is shown but is not allowed to change. It is the same
       grey Bootstrap uses for a switched-off field, so the two look alike on one form. */
    --surface-disabled: #e9ecef;

    /* The very slightly grey background on every other row of the audit list, so the eye can
       follow a row across. */
    --surface-zebra: #f9f9f9;

    /* The grey line under the mobile sidebar launcher. */
    --border-light: #e2e8f0;

    /* The grey line around form controls, matching the one Bootstrap draws. */
    --border-grey: #dee2e6;

    /* The faint line between two audit entries. */
    --border-audit-divider: rgba(56, 56, 56, 0.24);

    /* The red Bootstrap uses to mark something wrong, repeated here so our own rules match it. */
    --danger-red: #dc3545;

    /* The amber behind the step the order has currently reached. */
    --status-amber: #ffc107;

    /* The dark green behind a step the order has already passed. */
    --step-done-green: #2e7d32;

    /* The pale green behind a step the order has not reached yet. */
    --step-pending-green: #a5d6a7;

    /* The red behind a step that failed. */
    --step-failed-red: #d32f2f;

    /* The purple ring drawn around a button when it has the keyboard's attention, so a reader
       navigating without a mouse can see where they are. */
    --focus-ring-purple: rgba(111, 66, 193, 0.4);

    /* The soft shadow under a raised panel. */
    --shadow-soft: rgba(0, 0, 0, 0.1);

    /* The stronger shadow under the audit log, which floats over the page. */
    --shadow-strong: rgba(0, 0, 0, 0.3);

    /* The amber halo that grows and fades around the current step. */
    --pulse-amber: rgba(255, 193, 7, 0.7);
    --pulse-amber-faded: rgba(255, 193, 7, 0);

    /* The green the support chat widget is painted in. It is a different green from the brand
       green on purpose: the widget appears over other people's pages and reads as a separate
       thing. */
    --support-green: #1a7a4f;

    /* The darker support green the launcher and send button turn under the pointer. */
    --support-green-dark: #156a44;

    /* The near-black the support widget writes its messages in. */
    --support-text: #1f2a26;

    /* The grey the support widget uses for timestamps and its status line. */
    --support-text-muted: #6b7d76;

    /* The pale green behind the list of support messages. */
    --support-surface: #f5f8f3;

    /* The pale green line around the support panel and its text box. */
    --support-border: #d9e5d5;

    /* The red circle carrying the count of support replies the reader has not seen. */
    --support-unread-red: #d93b3b;

    /* The red the support widget writes a failure in. */
    --support-error-red: #c0392b;

    /* The white the support widget's close button washes over on hover. */
    --support-close-hover: rgba(255, 255, 255, 0.16);

    /* The green ring around the support text box while it has the keyboard's attention. */
    --support-focus-ring: rgba(26, 122, 79, 0.18);

    /* The shadow under the support launcher button. */
    --support-shadow-launcher: rgba(15, 50, 35, 0.28);

    /* The shadow under the open support panel. */
    --support-shadow-panel: rgba(15, 50, 35, 0.22);

    /* The very nearly opaque white behind the intake form's fixed button bar, so form fields
       scrolling underneath are dimmed rather than hidden. */
    --intake-actions-background: rgba(255, 255, 255, 0.97);

    /* The pale green line above the intake form's fixed button bar. */
    --intake-actions-border: #d8e2d8;

    /* The shadow the intake form's button bar casts upward onto the form. */
    --intake-actions-shadow: rgba(15, 23, 42, 0.06);

    /* The shallower version of that shadow, used in the cramped Encompass panel. */
    --intake-actions-shadow-compact: rgba(15, 23, 42, 0.05);

    /* The navy behind the printed order pages' headings. */
    --order-blue: #003366;

    /* The red on the printed order pages. */
    --order-red: #cc0000;

    /* The brown marking text a consumer fills in on the printed order pages. */
    --order-consumer-brown: #804000;

    /* The grey the summary-hidden order page writes table cells in. */
    --order-cell-grey: #696969;

    /* The corner sizes, smallest to largest. */
    --radius-tiny: 2px;
    --radius-small: 4px;
    --radius-medium: 6px;
    --radius-large: 8px;
    --radius-message: 10px;
    --radius-bubble: 14px;
    --radius-panel: 16px;
    --radius-pill: 20px;
    --radius-circle: 50%;

    /* How high things stack. The mobile sidebar launcher sits above the page, the intake form's
       button bar sits above that, and the support widget sits above everything - its number is
       just below the largest a browser accepts, because the widget has to stay on top of pages
       we did not write. */
    --layer-sidebar-launcher: 20;
    --layer-intake-actions: 30;
    --layer-support-widget: 2147483600;

    /* The width the intake form stops growing at, so a line of text stays comfortable to read on
       a wide screen. */
    --intake-form-max-width: 1180px;

    /* The width below which the fee tables scroll sideways instead of squashing their columns. */
    --fee-table-min-width: 920px;

    /* The width the tracker's column of steps stops growing at, so the list of steps stays a
       readable column rather than stretching across a wide screen. */
    --tracker-column-width: 720px;

    /* The height of the bar holding the mobile sidebar button. A heading scrolled to by its link
       is pushed down by exactly this much so the bar does not cover it. */
    --mobile-sidebar-launcher-height: 56px;
}