/* Default Theme: \public\assets\css\theme\default.css */

/* Basics */
root {
    font-family: 'Open Sans', sans-serif;
    /* change to another font for live */
    font-size: 16px;
    font-weight: 500;
}

/* Variants */
:root {
/* Darker Scheme */
    --background-colour-1:      #0b1c2b;
    /* --set-background-colour-1:  #1e293b; */
    --set-background-colour-1:  #1f2c45;
    --text-colour-1:            #e0f2fe;
    --secondary-colour-1:       #143885;
    --tertiary-colour-1:        #3b82f633;
    --border-colour-1:          #00000000;
    --link-color-1:             #afc4f1;
    --button-background-1:      #afc4f1;
    --button-text-1:            #0b1c2b;
    --input-background-1:       #afc4f1;
    --input-focus-1:            #e0f2fe;
    --focus-colour-1:           #e0f2fe;

/* Lighter Scheme */
    --background-colour-2:      #FFFFFF;
    --set-background-colour-2:  #F3F4F6;
    --text-colour-2:            #051327;
    --secondary-colour-2:       #2563EB;
    --tertiary-colour-2:        #3b82f633;
    --border-colour-2:          #00000000;
    --link-color-2:             #2563EB;
    --button-background-2:      #2563EB;
    --button-text-2:            #FFFFFF;
    --input-background-2:       #ecf1fa;
    --input-focus-2:            #e0f2fe;
    --input-boarder-2:           #2563EB;
    --focus-colour-2:           #626262;

    --notice-background:        #3D0000;
    --notice-text:              #FF8887;
    --notice-focus-colour:      #000000;
}

.transition-colors {
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
}

.card {
    --card-border-radius: 5px;
}

/**** Complimentary Colours ****/
.complimentary-blue {
    background-color: lightblue;
    color: darkblue;
}
.complimentary-brown {
    background-color: burlywood;
    color: #67330E;
}
.complimentary-green {
    background-color: lightgreen;
    color: darkgreen;
}
.complimentary-orange {
    background-color: #FF8C00;
    color: #603100;
}
.complimentary-purple {
    background-color: plum;
    color: purple;
}
.complimentary-red {
    background-color: #FB9090;
    color: darkred;
}
.complimentary-yellow {
    background-color: lightyellow;
    color: #b85B0b;
}