/*=========================================================
44 Web Design Framework
-----------------------------------------------------------
Project      : 433
Client       : Vehicle Safety Solutions Ltd

File         : variables.css
Version      : 1.0.0

Author       : Ian Latus
Company      : 44 Web Design

Purpose
-------
Global design tokens used throughout the website.

Contents
--------
1. Brand Colour Tokens
2. Typography Tokens
3. Layout Tokens
4. Spacing Tokens
5. Border Tokens
6. Shadow Tokens
7. Animation Tokens
8. Icon Tokens

=========================================================*/

/*=========================================================
Dependencies

None
=========================================================*/


/*=========================================================
1. Brand Colour Tokens
=========================================================*/

:root {

    --colour-primary:        #276397;
    --colour-secondary:      #3D84C4;

    --colour-dark:           #0D2340;
    --colour-grey:           #A3B4C1;
    --colour-light:          #F7F9FC;

    --colour-white:          #FFFFFF;
    --colour-black:          #111111;

}


/*=========================================================
2. Typography Tokens
=========================================================*/

:root {

    --font-family:           "Plus Jakarta Sans", sans-serif;

    --font-size-xs:          0.875rem;
    --font-size-sm:          1rem;
    --font-size-md:          1.125rem;
    --font-size-lg:          1.375rem;
    --font-size-xl:          2rem;
    --font-size-2xl:         3rem;
    --font-size-3xl:         4rem;

	/* Hero Components */
	--font-size-4xl:         5rem;	
	
    --line-height:           1.6;

	/* Hero */
	--hero-max-width:        38rem;
	
}


/*=========================================================
3. Layout Tokens
=========================================================*/

:root {

    --site-width:            1280px;

    --content-width:         760px;
	
	/* Header */
    --header-height:         90px;

	/* Layout */

	--grid-gap:              var(--space-md);
	
	--logo-height:           60px;

	/* Layout Tokens */

	--content-width-narrow: 56.25rem;   /* 900px */
	--spine-marker-width:    3rem;

}


/*=========================================================
4. Spacing Tokens
=========================================================*/

:root {

    --space-xs:              0.5rem;
    --space-sm:              1rem;
    --space-md:              2rem;
    --space-lg:              4rem;
    --space-xl:              6rem;
    --space-2xl:             8rem;

	/* Buttons */

	--space-button-y:        0.9rem;
	--space-button-x:        1.8rem;
	
}


/*=========================================================
5. Border Tokens
=========================================================*/

:root {

    --radius-sm:             8px;
    --radius-md:             16px;
    --radius-lg:             28px;

}


/*=========================================================
6. Shadow Tokens
=========================================================*/

:root {

    --shadow-sm:             0 4px 12px rgba(0,0,0,.08);

    --shadow-md:             0 10px 30px rgba(0,0,0,.12);

    --shadow-lg:             0 20px 60px rgba(0,0,0,.18);

}


/*=========================================================
7. Animation Tokens
=========================================================*/

:root {

    --transition-fast:       .20s ease;

    --transition-normal:     .35s ease;

    --transition-slow:       .60s ease;

}

/*=========================================================
8. Icon Tokens
=========================================================*/

:root {

    --icon-size-sm: 1.5rem;
    --icon-size-md: 2rem;
    --icon-size-lg: 3rem;

}