/* 
2025-02-23 RMcQ
colors used in the application.

*/

/* 
2025-06-29 RMcQ

BUT BUT BUT BUT ....
DodgerBlue is 
#1E90FF hex
30,144,255 RGB
rgb(30,144,255,0.75) is 75% transparent (lighter on white)





2024-02-29 RMcQ

(All map colors are currently in maps-colors.css)

This file contains: 

PART 1: COLOR DEFINITIONS:

* A set of colors to complement the Bootstrap primary color,
using the triadic and tetradic colors from the color wheel.

* A set of lighter and darker shades of the primary color and tertiary complementaty colors.

PART 2: COLOR APPLICATIONS:

* Colors applied to the header tags h1 through h6. (Generally darker colors).

* Colors applied to the page backgrounds for the specific application areas. (Generally lighter colors).* 

*/

/* 
PART 1: COLOR DEFINITIONS 
*/

:root {

/*

Tetradic colors 'surrounding' bg-primary:

    To GET the colors:
    - See https://www.canva.com/colors/
    - See https://www.canva.com/colors/color-wheel/

    To lighten and darken the tetradic colors:
    Also gets the exact color NAME:
    - See https://www.colors.tools/lighten-and-darken

*/

    /* "bluish", */
    --str-tetradic-1-darker-40: #01193d;
    --str-tetradic-1-darker-30: #012e70;
    --str-tetradic-1-darker-20: #0143a3;
    --str-tetradic-1:           #0d6efd; /* "Deep Sky Blue" (bs-primary) */       
    --str-tetradic-1-lighter-10:#408cfd;
    --str-tetradic-1-lighter-20:#72abfe;
    --str-tetradic-1-lighter-30:#a5c9fe;
    --str-tetradic-1-lighter-40:#d7e7ff;
    --str-tetradic-1-lighter-50:#fff;

    /* "reddish" */
    --str-tetradic-2-darker-40: #3d0138;
    --str-tetradic-2-darker-30: #700165;
    --str-tetradic-2-darker-20: #a30193;
    --str-tetradic-2:           #FD0DE6; /* "Bright Magenta" */     
    --str-tetradic-2-lighter-20:#fe72f0;
    --str-tetradic-2-lighter-40:#ffd7fb;

    /* "orangish" */
    --str-tetradic-3-darker-40: #3d2501;
    --str-tetradic-3-darker-30: #704301;
    --str-tetradic-3-darker-20: #a36101;
    --str-tetradic-3:           #FD9C0D; /* "Clementine Earring" */
    --str-tetradic-3-lighter-20:#fec572;
    --str-tetradic-3-lighter-40:#ffefd7;

    /* "greenish" */
    --str-tetradic-4-darker-40: #013d06;
    --str-tetradic-4-darker-30: #01700c;
    --str-tetradic-4-darker-20: #01a311;
    --str-tetradic-4:           #0DFD24; /* "Acid Drop" */
    --str-tetradic-4-lighter-20:#72fe80;
    --str-tetradic-4-lighter-40:#d7ffdb;

}


/*
PART 2: COLOR APPLICATIONS:
*/

h1 {
    color: var(--str-tetradic-1-darker-30);
}
h2 {
    color: var(--str-tetradic-2-darker-30);
}
h3 {
    color: var(--str-tetradic-4-darker-30);
}
h4 {
    color: var(--str-tetradic-3-darker-30);
}
h5 {
    color: var(--str-tetradic-1-darker-40);
}
h6 {
    color: var(--str-tetradic-1-darker-40);
}