@font-face {
    font-family: 'Figtree';
    src: url('/fonts/Figtree-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Figtree';
    src: url('/fonts/Figtree-Italic.ttf') format('truetype');
    font-weight: normal; 
    font-style: italic; 
}

@font-face {
    font-family: 'Figtree';
    src: url('/fonts/Figtree-Medium.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Figtree';
    src: url('/fonts/Figtree-MediumItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic; 
}

@font-face {
    font-family: 'Virgil';
    src: url('/fonts/Virgil.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {

    --element-radius: 8px;
    --element-spacing-unit: 4px;
    --element-spacing-proportional: 0.75rem;
    --element-gap-unit: 20px;

    --font-family-default: Figtree, Gotham, Helvetica, sans-serif;
    --font-family-print: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    --font-family-casual: Virgil, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    
    --font-size-image: 120px;
    --font-size-gigantic: 72px;
    --font-size-huge: 40px;
    --font-size-xlarge: 32px;
    --font-size-large: 24px;
    --font-size-normal: 18px;
    --font-size-small: 14px;
    --font-size-xsmall: 12px;
    --font-size-micro: 10px;

    --blur-tiny: 1px;
    --blur-low: 3px;
    --blur-high: 5px;
    --blur-extreme: 12px;
    
    --speed-lightning: 0.05s;
    --speed-fast: 0.15s;
    --speed-medium: 0.25s;
    --speed-slow: 2s;
    --speed-background-fast: 5s;
    --speed-background-medium: 10s;
    --speed-background-slow: 30s;

    /* Base Colours */
    --colour-white: 255, 255, 255;
    --colour-whitest: 234, 238, 238;  /* Porcelain / Whitest  --colour-secondary-light*/
    --colour-blackest: 30, 30, 30; /* Cod Gray / Blakcest --colour-secondary-dark: */
    --colour-black: 0, 0, 0;

    --colour-primary-dark: 14, 41, 75; /* Blue Zodiac  --colour-primary-light: */                   
    --colour-primary-light: 172, 200, 238; /* Perano  --colour-primary-dark: */
    
    /* these pastels are all S=70% and L=82% with just the H being varied */
    --colour-pastel-red: 241, 176, 176; /* pastel red RGB(241, 176, 176) H=0 */
    --colour-pastel-orange: 241, 212, 177; /* pastel orange RGB(241, 212, 177) H=33 */
    --colour-pastel-yellow: 225, 241, 177; /* pastel yellow RGB(225, 241, 177) H=75 */
    --colour-pastel-green: 176, 241, 181; /* pastel green RGB(176, 241, 181) H=125 */
    --colour-pastel-teal: 177, 241, 225; /* pastel teal RGB(177, 241, 225) H=165 */ 
    --colour-pastel-blue: 176, 210, 241; /* pastel blue RGB(176, 210, 241) H=209 */ 
    --colour-pastel-purple: 210, 176, 241; /* pastel purple RGB(210, 176, 241) H=271 */
    --colour-pastel-mauve: 241, 177, 209; /* pastel mauve RGB(241, 177, 209) H=325 */
    
    /* Derived Colours */
    --colour-workload-to-workflow: var(--colour-pastel-teal);
    --colour-knowledge-to-know-how: var(--colour-pastel-orange);
    --colour-inkling-to-insight: var(--colour-pastel-mauve);

    --colour-digital-operations: var(--colour-pastel-blue);
    --colour-data-analytics: var(--colour-pastel-green);
    --colour-knowledge-management: var(--colour-pastel-yellow);
    --colour-presentation-design: var(--colour-pastel-red);
    --colour-technical-facilitation: var(--colour-pastel-purple);

    --colour-zero: var(--colour-white);
    --colour-zeroest: var(--colour-whitest);
    --colour-primary: var(--colour-primary-dark);
    --colour-complement: var(--colour-primary-light);
    --colour-fullest: var(--colour-blackest);
    --colour-full: var(--colour-black);

    --opacity-factor: 1;

}