/* The ChorePoints brand palette. One copy, in the shared component library, read by the web
   app and by the phone app through `_content/ChorePoints.UI/brand.css`.

   It lived in two places until now -- `Web/wwwroot/app.css` and a verbatim copy in
   `Mobile/wwwroot/app.css` -- because there was nowhere for one copy to live. Doc 57 said so at
   the time and promised this move. A brand colour is now one edit again.

   Custom properties declared on :root reach scoped component stylesheets too (scoped CSS
   rewrites selectors, it does not isolate the cascade), and that holds across a library
   boundary as well -- so a component in either host can paint itself from these without
   repeating a hex. See Documentation/60-The-Shared-Component-Library.md and doc 24.
*/

:root {
    --brand-primary: #9678B6;
    --brand-primary-dark: #82679E;
    --brand-ink: #2B2438;

    /* The pressed-and-hovered end of the purple, mixed from the two above rather than written
       as a third hex so re-branding is still one edit. It exists because a button has to be
       readable: white on --brand-primary is only 3.7:1, short of the 4.5:1 AA asks of normal
       text, while --brand-primary-dark reaches 4.8:1 -- so a primary button sits on the dark
       end of the brand and needs somewhere darker still to go when it is hovered or pressed.
       This mix reaches 6.1:1 against white and 5.0:1 as text on --brand-page-bg, which is what
       an outline button's label is drawn on. See Documentation/77-Brand-Coloured-Buttons.md. */
    --brand-primary-deep: color-mix(in srgb, var(--brand-primary-dark) 78%, var(--brand-ink));

    /* The outline of an unticked checkbox, a radio and a switch's knob. Bootstrap draws all
       three in rgba(0, 0, 0, .25), which over a white card is #BFBFBF -- 1.9:1 against the
       card, under the 3:1 WCAG asks of the boundary of a control you are meant to find and
       hit, and on the lavender page backdrop it is fainter still. This medium grey is 4.5:1
       on white and 4.2:1 on --brand-page-bg, so the box reads as a box before it is ticked.
       Neutral rather than a tint of the brand on purpose: the purple belongs to the ticked
       state, and an unticked box that is already purple-ish blurs the difference.
       See Documentation/97-The-Checkbox-Outline.md. */
    --brand-check-border: #767676;

    --brand-nav-gradient: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);

    /* The page backdrop behind everything <article> holds, so a white card reads as a card
       rather than as the page itself. It started on the chore page alone and is now the
       background of every page, painted once on <main> in MainLayout.razor.css. The name
       is what a page should read; the literal stays here with the rest of the palette.
       See Documentation/23-Page-Backdrop.md. */
    --brand-page-bg: #E6E6FA;

    /* The diagonal stripe backdrop, kept here for the same reason as the gradient: one
       definition, read by name wherever it is painted. The two tints are mixed from
       --brand-primary rather than written as hexes, so re-branding still only means
       editing the hex above; --brand-stripe-tint and --brand-stripe-shade are the knobs
       that decide how loud the stripes are. 10px bands at -55deg keep the angle and the
       rhythm of the pattern this replaced. See Documentation/40-Profile-Cards-Backdrop.md. */
    --brand-stripe-tint: 10%;
    --brand-stripe-shade: 18%;
    --brand-stripe-a: color-mix(in srgb, var(--brand-primary) var(--brand-stripe-tint), #fff);
    --brand-stripe-b: color-mix(in srgb, var(--brand-primary) var(--brand-stripe-shade), #fff);
    --brand-stripes: repeating-linear-gradient( -55deg,
        var(--brand-stripe-a) 0, var(--brand-stripe-a) 10px,
        var(--brand-stripe-b) 10px, var(--brand-stripe-b) 20px );
}