:root {

    /*  Adobe: Split Complimentery */
    --color-green-accent:   #98B35B;
    --color-green-light:    #D5FF75;
    --color-pink-hot:       #FF69B4;
    --color-turq-accent:    #37B37D;
    --color-turq-light:     #5CFFB8;



    /*
        Use TAILWIND NEUTRAL for basic greys
        Not TAILWIND GREY
    */
    /*
    --color-grey-on-white-lightest: #666;
    --color-grey-on-white-normal:   #999;
    --color-grey-on-white-dark:     #333;

    --color-grey-on-white-bg-light:   #666;
    --color-grey-on-white-bg-normal:  #666;
    --color-grey-on-white-bg-dark:    #666;


    
    --color-white-on-grey-lightest:     #fff;
    --color-white-on-grey-normal:        #fff;
    --color-white-on-grey-dark:         #fff;

    --color-white-on-grey-bg-lightest:  #666;
    --color-white-on-grey-bg-normal:     #999;
    --color-white-on-grey-bg-dark:      #333;
    */

    /*
        These will be superceded by Tailwind colours.
    */
    /*
    --colour-tailwind-pink-400:     rgb(244, 114, 182);
    --colour-tailwind-grey-50:     rgb(248, 250, 252);  
    --colour-tailwind-grey-400:     rgb(148, 163, 184);
    --colour-tailwind-indigo-400:     rgb(129, 140, 248);
    --colour-tailwind-blue-light:     rgb(125, 211, 252);
    --colour-tailwind-turq-light:     rgb(153, 246, 2528);
    --colour-tailwind-sky-500:  rgb(014, 165, 233);
    --colour-tailwind-blue-500:  rgb(059, 130, 246);
    --colour-trailwind-bg-gray-900: rgb(015, 023, 042);     
    */




    --var-font-color-root: var(--colour-tw-neutral-900, #424242);
    --var-font-color-base: var(--colour-tw-neutral-900, #424242);
    --var-font-color-h1:  var(--colour-tw-neutral-800, red);
    --var-font-color-h2:  var(--colour-tw-neutral-300, red);
    --var-font-color-h3:  var(--colour-tw-neutral-900, red);
    --var-font-color-h4:  var(--colour-tw-neutral-500, red);
    --var-font-color-h5:  var(--colour-tw-neutral-800, red);
    --var-font-color-h6:  var(--colour-tw-neutral-800, red);
    --var-font-color-p:   var(--colour-tw-neutral-800, red);    



}





/*
//  ==========
//  LIGHT MODE
//  ==========
//
//  html.light,
//  body.light, 
//  prefers-color-scheme: light
//
//  Annoying that these can't be the same, but is what it is.
*/

html.light, 
body.light
{

}

@media screen and (prefers-color-scheme: light) {
    html {


    }
}




/*
//  =========
//  DARK MODE
//  =========
//
//  html.dark,
//  body.dark, 
//  prefers-color-scheme: dark
//
//  Annoying that these can't be the same, but is what it is.
*/

html.dark,
body.dark 
{ 


}

@media screen and (prefers-color-scheme: dark) {
    html {


    }
}




/*
//  =========
//  TAILWIND MODE
//  =========
//
//  html.dark,
//  body.dark, 
//  prefers-color-scheme: dark
//
//  Annoying that these can't be the same, but is what it is.
*/

html.dark,
body.dark 
{ 


}

@media screen and (prefers-color-scheme: dark) {
    html {


    }
}