/*-------------------------------------------------------------------
DESIGN TOKENS  -  Driving Safety Sites

Replaces the old less.less. There is no build step any more: what is
authored here is what ships, so edit this file directly.

Token NAMES match the drivingsafetysites theme exactly, only the values
differ. That is deliberate - the parent theme's Branding screen writes a
second :root block into wp_head redefining these same properties, so if
this install's parent carries that feature the palette, fonts and sizes
become editable per site with no further work here. Where it does not,
these values simply stand as the theme's defaults.

Keep the region and menu tokens defined as var() references rather than
literals: that is what lets a single --color-primary override flow into
the menu, header and footer.
-------------------------------------------------------------------*/

:root {

    /*--- FONTS ---*/
    --font-family-primary: 'Open Sans', sans-serif;
    --font-family-secondary: 'Kumbh Sans', sans-serif;
    --line-height-normal: normal;

    /*--- SPACING ---*/
    --margin-bottom-large: 1.5rem;
    --margin-bottom-small: .75rem;

    /*--- BODY TEXT SIZES ---*/
    --font-size-normal: 1rem;
    --font-size-small: .875rem;
    --font-size-caption: .75rem;
    --font-size-large: 1.25rem;
    --font-size-xlarge: 1.5rem;

    /*--- HEADING SIZES ---*/
    /* Heading line-heights are unitless ratios, not fixed rem, so changing a
       size keeps its line box in proportion instead of leaving a gap. */
    --font-size-h1: 4.375rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.125rem;
    --font-size-h5: 1.125rem;
    --font-size-h6: 1.125rem;
    --line-height-h1: 1.0571429; /* was 4.625rem at 4.375rem = 37/35 */
    --line-height-h2: 1.125;     /* was 2.25rem at 2rem, exact */

    /* Narrow-screen h1. Proportional so it tracks whatever h1 is set to:
       2.5 / 4.375 = 4/7, and its own line-height 2.75rem / 2.5rem = 1.1. */
    --font-size-h1-narrow: calc(var(--font-size-h1) * 0.5714286);
    --line-height-h1-narrow: 1.1;

    /* Hero headings: the front-page intro and the guarantee band, set at
       their own scale rather than h1's (Drivers Ed uses h1's size directly). */
    --font-size-display: 3.75rem;
    --line-height-display: 1.2333333; /* was 4.625rem at 3.75rem */

    /*--- COLOURS ---*/
    --color-background: #000000;
    --color-primary: #000000;
    --color-primary-light: #0000007a;
    --color-secondary: #c93c24;
    --color-alternate: #e1a825;
    --color-accent: #e1a825;
    --color-step-1: #c93c24;
    --color-step-2: #c93c24;
    --color-step-3: #c93c24;
    --color-step-4: #c93c24;
    --color-reverse: #FFFFFF;
    --color-border: #CCCCCC;

    /* Each step panel is a gradient from its own colour into its own end
       colour, so one step can be recoloured without touching the other three.
       All four default to the same shade, which is how it looked when a single
       token drove them. */
    --color-step-1-end: #a42b15;
    --color-step-2-end: #a42b15;
    --color-step-3-end: #a42b15;
    --color-step-4-end: #a42b15;

    /* Not part of the palette, but a real colour in the design that a
       recolour has to be able to reach. */
    --color-drivers-ed: #159bc7;

    /*--- LOGOS ---*/
    /* Settable at Site Settings -> Branding -> Logo. Driven from CSS rather
       than the <img width> attribute, which only accepts unitless pixels -
       this way rem, % and vw work too. */
    --logo-width: 250px;
    --logo-footer-width: 250px;

    /*--- IMAGERY ---*/
    /* The header hero backdrop, overridable at Site Settings -> Branding ->
       Hero. Relative URLs in a custom property resolve against the stylesheet
       that DECLARES them, and this file sits beside theme.css in css/, so the
       path below is correct wherever the token is used. The per-site override
       is an absolute URL from the media library, so it is unaffected by that
       rule even though it is emitted inline in wp_head. */
    --hero-image: url(../images/hero.webp);

    /*--- BUTTONS & FORMS ---*/
    --button-radius: 0;
    --form-radius: 0;

    /*--- REGIONS ---*/
    --mainmenu-background-color: var(--color-primary);
    --header-background-color: var(--color-reverse);
    --main-background-color: var(--color-reverse);
    --footer-background-color: var(--color-background);

    /*--- MENU ---*/
    --menu-link-color: var(--color-reverse);
    --menu-link-hover: var(--color-secondary);
    --submenu-link-color: var(--color-reverse);
    --submenu-link-hover: var(--color-reverse);
    --submenu-bg: var(--color-secondary);
    --submenu-bg-hover: var(--color-alternate);
    --submenu-shadow: 0 .5rem 1.25rem #0000001c;

}