:root {
    --app-background: #ffffff;
    --heading-color: #000;
    --muted-text: #6f6677;
    --hero-background: #f2e9f7;
    --button-background: #e11f1e;
    --button-text: #ffffff;
    --footer-background: #f5f5f7;
    --error-color: #9e1f1f;
    --error-background: #fff1f1;
    --error-text: #5a2020;
    --error-border: #f2c8c8;
    --success-background: #f0f8f1;
    --success-text: #1b4d20;
    --success-border: #c6e0c9;

    /* Consumed by variants/pay3.css, which cannot know the brand.
       Measured off the SIGN UP button on the Identity Pay3 artboard (node 1537-738: #ff0077,
       457.33x53.33, radius 34) — a warmer pink than the #e50695 the brand palette uses. */
    --brand-pay3-button: #ff0077;

    /* The welcome page's DOWNLOAD SIGNED AGREEMENT pill, filled with that same pink under a white
       label (node 1582-801 and the phone frame beside it), where Truworths draws it white. */
    --brand-pay3-download: var(--brand-pay3-button);
    --brand-pay3-download-text: #ffffff;

    /* Identity draws these bands as the flat grey below, with no artwork over it. */
    --brand-pay3-band-image: none;

    /* Poppins is Identity's face, not Pay3's: in the React funnel every Poppins rule sits on an
       Identity-suffixed class, and Truworths/YDE get Arial. No webfont is shipped for it here, so
       it resolves only where the reader already has it and otherwise falls back to Arial. The
       React app loads it from Adobe Typekit; matching that needs a decision, not a default. */
    --brand-pay3-font: "Poppins", Arial, Helvetica, sans-serif;

    /* The benefit badge: 32px on the mobile and desktop frames alike (Groups 17557-17560), where
       Truworths steps up from 30 to 38. Its #FF0077 disc is in the icon itself. */
    --brand-pay3-badge: 2rem;

    /* The consent tick, in the brand pink where Truworths keeps the default black (the tick pixels
       on Flow 5's g3 read #FF0077). A whole image rather than a colour, because the tick is drawn
       as a background and a data URI cannot read a custom property. */
    --brand-pay3-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 187 119.4'%3E%3Cpolygon fill='%23ff0077' points='68.3,119.4 0,73 8.6,60.4 66.9,100.1 176.5,0.3 186.8,11.5'/%3E%3C/svg%3E");
}