:root {
    /** The brand colour: buttons, a focused field's border, checked boxes and the busy spinner. */
    --color-primary: #e8a000;
    /** A button under the pointer, an action link and a sorted table heading. */
    --color-primary-dark: #b97700;
    /** The admin Sign out button under the pointer. */
    --color-primary-hover: #ffd56e;
    /** A button while pressed. */
    --color-primary-active: #8a5a00;
    /** Text on a button, a badge and the cart count. */
    --color-on-primary: #ffffff;
    /** The faintest tint: a choice or a suggestion under the pointer. */
    --color-primary-wash: #fffdf5;
    /** The shop's hero band, a chosen option and an action button. */
    --color-primary-tint: #fff7e6;
    /** The two ends of a product tile's picture backdrop, and an action button under the pointer or pressed. */
    --color-primary-tint-2: #fff1d6;
    --color-primary-tint-3: #ffe0b8;

    /** A link, and a link under the pointer. */
    --color-link: #b97700;
    --color-link-hover: #8a5a00;

    /** The ring around a focused field or button, and around a field under the pointer. */
    --color-focus-ring: rgba(232, 160, 0, .25);
    --color-hover-ring: rgba(189, 189, 189, 0.25);

    /** The admin sign-in page's background. */
    --color-auth-bg: #e7e4dd;

    /** The page background, also every second table row. */
    --color-bg: #f6f6f4;
    /** Cards, modals, fields and secondary buttons. */
    --color-surface: #ffffff;
    /** Text, and the dimmer text of a label, a hint or a note. */
    --color-text: #222222;
    --color-text-muted: #555555;

    /** Borders: a field under the pointer, then fields and cards, then the dividers inside a modal or a table. */
    --color-border-dark: #bbbbbb;
    --color-border: #cccccc;
    --color-border-light: #e0e0e0;
    /** A disabled button. */
    --color-disabled: #cfcfcf;

    /** The admin sidebar and the shop footer: background, an item under the pointer, dividers, text and dimmer text. */
    --color-nav-bg: #2b2b2b;
    --color-nav-bg-hover: #3a3a3a;
    --color-nav-border: #444444;
    --color-nav-text: #cccccc;
    --color-nav-text-dim: #bbbbbb;

    /** Notices, toasts and order pills: an error or a refund, success or paid, a warning or unpaid, and a note. */
    --color-error-bg: #fdecea;
    --color-error-text: #b3261e;
    /** A danger button while pressed. */
    --color-error-text-hover: #841a14;
    --color-success-bg: #e7f5e9;
    --color-success-text: #1e7d32;
    --color-warn-bg: #fff4e0;
    --color-warn-text: #9a6300;
    --color-info-bg: #e8f1fb;
    --color-info-text: #1a5fb4;

    /** The admin pills for an order out for delivery or partly paid, and for a refund in progress. */
    --color-progress-bg: #fff4d6;
    --color-refunding-bg: #fde7d2;
    --color-refunding-text: #a34d00;

    /** Delivery zone colours, given to stores in this order on the zones map. */
    --zone-1: #d62828;
    --zone-2: #1d6fd6;
    --zone-3: #2a9d3f;
    --zone-4: #8e44ad;
    --zone-5: #e8a000;
    --zone-6: #0f9d9a;
    --zone-7: #e0569b;
    --zone-8: #6d4c41;

    /** Corner rounding: small, then buttons and fields, then cards and modals. */
    --radius-sm: 3px;
    --radius: 6px;
    --radius-lg: 10px;
    /** The shadow under the shop's top bar, a toast and the admin page. */
    --shadow: 0 2px 12px rgba(0, 0, 0, .08);

    /** The gap between stacked blocks, also the page padding. */
    --stack-gap: 1rem;
}