/* =========================================================
   W. W. DOAK THEME COLOURS
   =========================================================

   This is the central place to change the main storefront colours.

   To adjust the site-wide blue/background theme, change the values in
   the :root block below. The rest of the CSS should reference these
   variables instead of repeating the same hex colours in multiple files.

   Activity logging note:
   - CSS files do not write activity logs.
   - If these colours later become editable through Admin, log the save action
     in the Admin controller that handles the form submit, including the old
     and new values in the activity log context.
   ========================================================= */

:root {
    /*
        Main brand blues.

        The space-separated values are used by modern rgb(var(...) / alpha)
        syntax. The comma-separated companions are used by older rgba()
        syntax in places where a semi-transparent theme colour is needed.
    */
    --darkBlue: 33 54 99;
    --lightBlue: 54 75 120;
    --wwd-colour-dark-blue-rgb: 33, 54, 99;
    --wwd-colour-light-blue-rgb: 54, 75, 120;
    --wwd-colour-dark-blue: rgb(var(--darkBlue) / 1);/*#213663;*/
    --wwd-colour-light-blue: rgb(var(--lightBlue) / 1);/*#364B78;*/

    /* Main page shell background. */
    --wwd-colour-background: #e1e4e6;
    --wwd-colour-background-rgb: 225, 228, 230;

    /* Button gradient edge colour. */
    --wwd-colour-button-gradient-edge: #6075A0;

    /* Common neutral colours used by the shared theme controls. */
    --wwd-colour-white: #ffffff;
    --wwd-colour-black: #000000;

    /* Legacy raised-button shadow colour. */
    --wwd-colour-button-shadow: #363663;

    /* Reusable button backgrounds. */
    --wwd-button-gradient: linear-gradient(
        var(--wwd-colour-button-gradient-edge),
        var(--wwd-colour-dark-blue) 50%,
        var(--wwd-colour-button-gradient-edge)
    );

    --wwd-button-hover-gradient: linear-gradient(
        var(--wwd-colour-button-gradient-edge),
        var(--wwd-colour-light-blue) 50%,
        var(--wwd-colour-button-gradient-edge)
    );
}