/* Each page's hero colours (Models/HeroPictures: the layout names the page's picture in data-hero), chosen to set
   off the designs drawn in its picture: cool blues and cyans against kraft and wood, warm or bright hues against
   grey metal and white board, light ones behind dark line art. Light theme: a light tint, dark text; dark theme: a
   deep tint of the same hues, light text. A page without its own colours keeps its gradient class. */

wa-page[data-hero] .site-header {
    background-image: linear-gradient(to bottom right, var(--hero-from), var(--hero-to));
    color: var(--hero-text);
    --hero-text: #14161b;
}

    wa-page[data-hero] .site-header h1,
    wa-page[data-hero] .site-header h2 {
        color: inherit;
    }

:root:where(.wa-dark) wa-page[data-hero] .site-header {
    background-image: linear-gradient(to bottom right, var(--hero-dark-from), var(--hero-dark-to));
    --hero-text: #f3f4f7;
}

    /* the picture whose line art is drawn light, to show on the deep colours */
    :root:where(.wa-dark) wa-page[data-hero] .site-header::before {
        background-image: var(--hero-picture-dark, var(--hero-picture));
    }

/* white cartons */
wa-page[data-hero="home"] .site-header {
    --hero-from: var(--wa-color-indigo-80);
    --hero-to: var(--wa-color-purple-60);
    --hero-dark-from: var(--wa-color-indigo-30);
    --hero-dark-to: var(--wa-color-purple-10);
}

/* white cartons and a wood cabinet */
wa-page[data-hero="coming-soon"] .site-header {
    --hero-from: var(--wa-color-indigo-80);
    --hero-to: var(--wa-color-purple-60);
    --hero-dark-from: var(--wa-color-indigo-30);
    --hero-dark-to: var(--wa-color-purple-10);
}

/* a dieline and a white carton */
wa-page[data-hero="cad"] .site-header {
    --hero-from: var(--wa-color-blue-80);
    --hero-to: var(--wa-color-indigo-60);
    --hero-dark-from: var(--wa-color-blue-30);
    --hero-dark-to: var(--wa-color-indigo-10);
}

/* a grey sheet-metal box and its flat */
wa-page[data-hero="cad-tools"] .site-header {
    --hero-from: var(--wa-color-cyan-80);
    --hero-to: var(--wa-color-blue-60);
    --hero-dark-from: var(--wa-color-cyan-30);
    --hero-dark-to: var(--wa-color-blue-10);
}

/* kraft, wood and metal */
wa-page[data-hero="cad-industries"] .site-header {
    --hero-from: var(--wa-color-blue-80);
    --hero-to: var(--wa-color-cyan-60);
    --hero-dark-from: var(--wa-color-blue-30);
    --hero-dark-to: var(--wa-color-cyan-10);
}

/* kraft cases */
wa-page[data-hero="saas"] .site-header {
    --hero-from: var(--wa-color-indigo-80);
    --hero-to: var(--wa-color-blue-60);
    --hero-dark-from: var(--wa-color-indigo-30);
    --hero-dark-to: var(--wa-color-blue-10);
}

/* dark cut paths */
wa-page[data-hero="emulator"] .site-header {
    --hero-from: var(--wa-color-yellow-80);
    --hero-to: var(--wa-color-orange-60);
    --hero-dark-from: var(--wa-color-yellow-30);
    --hero-dark-to: var(--wa-color-orange-10);
}

/* kraft and white packs */
wa-page[data-hero="pack"] .site-header {
    --hero-from: var(--wa-color-cyan-80);
    --hero-to: var(--wa-color-blue-60);
    --hero-dark-from: var(--wa-color-cyan-30);
    --hero-dark-to: var(--wa-color-blue-10);
}

/* a white mailer */
wa-page[data-hero="contact"] .site-header {
    --hero-from: var(--wa-color-pink-80);
    --hero-to: var(--wa-color-purple-60);
    --hero-dark-from: var(--wa-color-pink-30);
    --hero-dark-to: var(--wa-color-purple-10);
}

/* a kraft box and its dieline */
wa-page[data-hero="dieline-check"] .site-header {
    --hero-from: var(--wa-color-cyan-80);
    --hero-to: var(--wa-color-green-60);
    --hero-dark-from: var(--wa-color-cyan-30);
    --hero-dark-to: var(--wa-color-green-10);
}

/* white and kraft boxes */
wa-page[data-hero="whats-new"] .site-header {
    --hero-from: var(--wa-color-purple-80);
    --hero-to: var(--wa-color-indigo-60);
    --hero-dark-from: var(--wa-color-purple-30);
    --hero-dark-to: var(--wa-color-indigo-10);
}

/* white cartons, wood and metal */
wa-page[data-hero="gallery"] .site-header {
    --hero-from: var(--wa-color-purple-80);
    --hero-to: var(--wa-color-pink-60);
    --hero-dark-from: var(--wa-color-purple-30);
    --hero-dark-to: var(--wa-color-pink-10);
}

/* a kraft mailer and line art */
wa-page[data-hero="apps"] .site-header {
    --hero-from: var(--wa-color-green-80);
    --hero-to: var(--wa-color-cyan-60);
    --hero-dark-from: var(--wa-color-green-30);
    --hero-dark-to: var(--wa-color-cyan-10);
}

/* a white carton and its dieline */
wa-page[data-hero="apps-viewer"] .site-header {
    --hero-from: var(--wa-color-purple-80);
    --hero-to: var(--wa-color-indigo-60);
    --hero-dark-from: var(--wa-color-purple-30);
    --hero-dark-to: var(--wa-color-indigo-10);
}

/* kraft cases */
wa-page[data-hero="apps-box-maker"] .site-header {
    --hero-from: var(--wa-color-blue-80);
    --hero-to: var(--wa-color-indigo-60);
    --hero-dark-from: var(--wa-color-blue-30);
    --hero-dark-to: var(--wa-color-indigo-10);
}

/* dark dielines */
wa-page[data-hero="apps-sheet-yield"] .site-header {
    --hero-from: var(--wa-color-yellow-80);
    --hero-to: var(--wa-color-green-60);
    --hero-dark-from: var(--wa-color-yellow-30);
    --hero-dark-to: var(--wa-color-green-10);
}

/* a white blank and carton */
wa-page[data-hero="apps-die-estimator"] .site-header {
    --hero-from: var(--wa-color-green-80);
    --hero-to: var(--wa-color-cyan-60);
    --hero-dark-from: var(--wa-color-green-30);
    --hero-dark-to: var(--wa-color-cyan-10);
}

/* light wood */
wa-page[data-hero="apps-cut-list"] .site-header {
    --hero-from: var(--wa-color-cyan-80);
    --hero-to: var(--wa-color-blue-60);
    --hero-dark-from: var(--wa-color-cyan-30);
    --hero-dark-to: var(--wa-color-blue-10);
}

/* dark line art */
wa-page[data-hero="apps-batch-converter"] .site-header {
    --hero-from: var(--wa-color-orange-80);
    --hero-to: var(--wa-color-yellow-60);
    --hero-dark-from: var(--wa-color-orange-30);
    --hero-dark-to: var(--wa-color-yellow-10);
}

/* mounts and a wood frame */
wa-page[data-hero="apps-mat-and-frame"] .site-header {
    --hero-from: var(--wa-color-pink-80);
    --hero-to: var(--wa-color-red-60);
    --hero-dark-from: var(--wa-color-pink-30);
    --hero-dark-to: var(--wa-color-red-10);
}

/* kraft cases */
wa-page[data-hero="apps-pallet-planner"] .site-header {
    --hero-from: var(--wa-color-cyan-80);
    --hero-to: var(--wa-color-indigo-60);
    --hero-dark-from: var(--wa-color-cyan-30);
    --hero-dark-to: var(--wa-color-indigo-10);
}

/* kraft cases */
wa-page[data-hero="apps-box-strength"] .site-header {
    --hero-from: var(--wa-color-blue-80);
    --hero-to: var(--wa-color-cyan-60);
    --hero-dark-from: var(--wa-color-blue-30);
    --hero-dark-to: var(--wa-color-cyan-10);
}

/* dark parts' outlines */
wa-page[data-hero="apps-true-shape-nesting"] .site-header {
    --hero-from: var(--wa-color-orange-80);
    --hero-to: var(--wa-color-red-60);
    --hero-dark-from: var(--wa-color-orange-30);
    --hero-dark-to: var(--wa-color-red-10);
}

/* a grey room and a runner */
wa-page[data-hero="apps-seam-planner"] .site-header {
    --hero-from: var(--wa-color-green-80);
    --hero-to: var(--wa-color-yellow-60);
    --hero-dark-from: var(--wa-color-green-30);
    --hero-dark-to: var(--wa-color-yellow-10);
}

/* white sign panels and decals */
wa-page[data-hero="apps-sign-quote"] .site-header {
    --hero-from: var(--wa-color-red-80);
    --hero-to: var(--wa-color-pink-60);
    --hero-dark-from: var(--wa-color-red-30);
    --hero-dark-to: var(--wa-color-pink-10);
}

/* wood, a gear and a dieline */
wa-page[data-hero="apps-spooler"] .site-header {
    --hero-from: var(--wa-color-indigo-80);
    --hero-to: var(--wa-color-cyan-60);
    --hero-dark-from: var(--wa-color-indigo-30);
    --hero-dark-to: var(--wa-color-cyan-10);
}

/* kraft boxes */
wa-page[data-hero="cad-industries-packaging"] .site-header {
    --hero-from: var(--wa-color-blue-80);
    --hero-to: var(--wa-color-indigo-60);
    --hero-dark-from: var(--wa-color-blue-30);
    --hero-dark-to: var(--wa-color-indigo-10);
}

/* light wood */
wa-page[data-hero="cad-industries-carpentry"] .site-header {
    --hero-from: var(--wa-color-cyan-80);
    --hero-to: var(--wa-color-blue-60);
    --hero-dark-from: var(--wa-color-cyan-30);
    --hero-dark-to: var(--wa-color-blue-10);
}

/* warm floorings */
wa-page[data-hero="cad-industries-carpets"] .site-header {
    --hero-from: var(--wa-color-indigo-80);
    --hero-to: var(--wa-color-blue-60);
    --hero-dark-from: var(--wa-color-indigo-30);
    --hero-dark-to: var(--wa-color-blue-10);
}

/* grey foam */
wa-page[data-hero="cad-industries-foam"] .site-header {
    --hero-from: var(--wa-color-orange-80);
    --hero-to: var(--wa-color-yellow-60);
    --hero-dark-from: var(--wa-color-orange-30);
    --hero-dark-to: var(--wa-color-yellow-10);
}

/* dark gasket outlines */
wa-page[data-hero="cad-industries-gaskets"] .site-header {
    --hero-from: var(--wa-color-yellow-80);
    --hero-to: var(--wa-color-orange-60);
    --hero-dark-from: var(--wa-color-yellow-30);
    --hero-dark-to: var(--wa-color-orange-10);
}

/* dark glass outlines */
wa-page[data-hero="cad-industries-glass"] .site-header {
    --hero-from: var(--wa-color-cyan-80);
    --hero-to: var(--wa-color-green-60);
    --hero-dark-from: var(--wa-color-cyan-30);
    --hero-dark-to: var(--wa-color-green-10);
}

/* grey ductwork */
wa-page[data-hero="cad-industries-hvac"] .site-header {
    --hero-from: var(--wa-color-orange-80);
    --hero-to: var(--wa-color-red-60);
    --hero-dark-from: var(--wa-color-orange-30);
    --hero-dark-to: var(--wa-color-red-10);
}

/* dark label outlines */
wa-page[data-hero="cad-industries-labels"] .site-header {
    --hero-from: var(--wa-color-pink-80);
    --hero-to: var(--wa-color-orange-60);
    --hero-dark-from: var(--wa-color-pink-30);
    --hero-dark-to: var(--wa-color-orange-10);
}

/* light plywood */
wa-page[data-hero="cad-industries-lasercutting"] .site-header {
    --hero-from: var(--wa-color-blue-80);
    --hero-to: var(--wa-color-purple-60);
    --hero-dark-from: var(--wa-color-blue-30);
    --hero-dark-to: var(--wa-color-purple-10);
}

/* pale leather goods */
wa-page[data-hero="cad-industries-leather"] .site-header {
    --hero-from: var(--wa-color-green-80);
    --hero-to: var(--wa-color-cyan-60);
    --hero-dark-from: var(--wa-color-green-30);
    --hero-dark-to: var(--wa-color-cyan-10);
}

/* dark mount outlines */
wa-page[data-hero="cad-industries-pictureframing"] .site-header {
    --hero-from: var(--wa-color-yellow-80);
    --hero-to: var(--wa-color-green-60);
    --hero-dark-from: var(--wa-color-yellow-30);
    --hero-dark-to: var(--wa-color-green-10);
}

/* grey pipework */
wa-page[data-hero="cad-industries-pipework"] .site-header {
    --hero-from: var(--wa-color-red-80);
    --hero-to: var(--wa-color-orange-60);
    --hero-dark-from: var(--wa-color-red-30);
    --hero-dark-to: var(--wa-color-orange-10);
}

/* pale fabric */
wa-page[data-hero="cad-industries-sewing"] .site-header {
    --hero-from: var(--wa-color-pink-80);
    --hero-to: var(--wa-color-purple-60);
    --hero-dark-from: var(--wa-color-pink-30);
    --hero-dark-to: var(--wa-color-purple-10);
}

/* grey sheet metal */
wa-page[data-hero="cad-industries-sheetmetal"] .site-header {
    --hero-from: var(--wa-color-orange-80);
    --hero-to: var(--wa-color-yellow-60);
    --hero-dark-from: var(--wa-color-orange-30);
    --hero-dark-to: var(--wa-color-yellow-10);
}

/* white sign panels */
wa-page[data-hero="cad-industries-signmaking"] .site-header {
    --hero-from: var(--wa-color-purple-80);
    --hero-to: var(--wa-color-indigo-60);
    --hero-dark-from: var(--wa-color-purple-30);
    --hero-dark-to: var(--wa-color-indigo-10);
}

/* warm stone */
wa-page[data-hero="cad-industries-stonetile"] .site-header {
    --hero-from: var(--wa-color-indigo-80);
    --hero-to: var(--wa-color-cyan-60);
    --hero-dark-from: var(--wa-color-indigo-30);
    --hero-dark-to: var(--wa-color-cyan-10);
}

/* pale steel plates */
wa-page[data-hero="cad-industries-structuralsteel"] .site-header {
    --hero-from: var(--wa-color-red-80);
    --hero-to: var(--wa-color-pink-60);
    --hero-dark-from: var(--wa-color-red-30);
    --hero-dark-to: var(--wa-color-pink-10);
}

/* dark decal outlines */
wa-page[data-hero="cad-industries-vinylcutting"] .site-header {
    --hero-from: var(--wa-color-green-80);
    --hero-to: var(--wa-color-yellow-60);
    --hero-dark-from: var(--wa-color-green-30);
    --hero-dark-to: var(--wa-color-yellow-10);
}