/* --------------------------------------------------------------
GLOBALS & VARIABLES
--------------------------------------------------------------*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0; 
    font-family: 'Quicksand', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 15px;
    /* color: red; */
}

:root {
    /* PALETTE ------------------------ */
    --blue-sky: #c1f2f2;    /* rgba(###, ###, ###, 1.0); */

    --blue-wave: #50d3d6;   /* rgba(80, 211, 214, 1)   */
    --color_waveBlue-600: #57BCBC;

    --navy-900: #36535e;    /* rgba(###, ###, ###, 1.0); */
    --navy-600: #3d6d84;    /* Header Color: rgba(64, 139, 162, 0.75); */
    --navy-500: #408ba2;    /* rgba(###, ###, ###, 1.0); */

    --sand-900: #dfcfbc;    /* rgba(###, ###, ###, 1.0); */
    --sand-800: #ecdcc2;    /* rgba(###, ###, ###, 1.0); */
    --sand-700: #ffebca;    /* sand-main  rgba(###, ###, ###, 1.0); */
    --sand-200: #ffeccb;    /* sand-light rgba(###, ###, ###, 1.0); */

    --brown-900: #847163; /* post-dark rgba(###, ###, ###, 1.0); */
    --brown-700: #998675; /* post-mid rgba(###, ###, ###, 1.0); */
    --brown-500: #ad9983; /* post-main rgba(###, ###, ###, 1.0); */

    --color_text: #3d6d84; // var(--navy600)
    --color_textLight: #7ab4b7; // rgba(122, 180, 183, 1)
    --color_navStepSubtle: #a1d3d1;

    --color_gold-500: #ffd477;
    --color_gold-600: #ffc861;


    // TUORIAL WAVE COLORS 
    --color_waveMini-OFF: #a0d2cf;
    --color_red-500: #e86348; // rgba(232, 99, 72, 1)
    --color_spruce-500: #669690;


    /* DRAWING AND POSITIONS ------------------------*/
    --appTopPadding: 64px;
    --gridW: 100vw/10;
    --gridH: 100vh/10;

}


/* Material Icons ------------------------ */
.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}