:root{

    /*          COLOURS            */
    --background: var(--blue);
    --foreground: var(--green);
        --blue: #343E49;
        --tan: #EFEAD6;
        --yellow: #ECEB73;
        --yellow-bg: #665623;
        --green: #A9DACA;
        --green-bg: #2E4F51;
        --red: #F8ABA7;
        --red-bg: #6E3634;
        --olive: #C1DD94;
        --olive-bg: #535545;



    /*          DISTANCE            */
    --unit: 8px;
        --xlarge: calc(var(--unit) * 24);        
        --large: calc(var(--unit) * 12);        
        --medium: calc(var(--unit) * 4);        
        --small: calc(var(--unit) * 2);         



    /*          ANIMATIONS           */
    --ani-s:  0.3s;         /* short - hover effects etc */
    --ani-m: 0.6s;       /* medium - not in use */
    --ani-l: 2s;            /* long - page transitions */
    --easing: ease-in-out;

}



/*          COLOUR SCHEMES         */

.regular {
    --background: var(--blue);
    --foreground: var(--green);
}

.yellow {
    --background: var(--yellow-bg);
    --foreground: var(--yellow);
}

.red {
    --background: var(--red-bg);
    --foreground: var(--red);
}

.olive {
    --background: var(--olive-bg);
    --foreground: var(--olive);
    
}

.green {
    --background: var(--green-bg);
    --foreground: var(--green);
}