:root {
    --primary: hsl(199, 37%, 55%);

    --secondary: hsl(220, 49%, 23%);
    
    /* --tertiary: hsl(190, 81%, 31%); */
    --tertiary: hsl(240, 6%, 90%);

    
    --accent: hsl(48, 100%, 52%);


    --bg-light: hsl(0, 0%, 100%);
    --bg: hsl(240, 4%, 95%);
    --bg-dark: hsl(240, 6%, 90%);

    --text-main: var(--bg-light); 
    --text-main-muted: hsl(from var(--tertiary) h s calc(l - 10));
    --text-dark: var(--secondary);
    --text-header: var(--text-dark);


    --button-icon: hsl(240,4%,95%);

    --shadow-s: inset 0 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;
    --shadow-m: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030, 0 4px 8px #00000015;
    --shadow-l: inset 0 1px 2px #ffffff70, 0 4px 6px #00000030, 0 6px 10px #00000015;

    --nav-button-color: var(--primary);
    --nav-button-color-disabled: hsl(0, 0%, 38%);

    --success:hsl(101, 46%, 36%);

}

body.dark-mode {

    --primary: hsl(199, 47%, 35%);

    --secondary: hsl(220, 49%, 13%);
    
    /* --tertiary: hsl(190, 81%, 31%); */
    --tertiary: var(--bg-dark);

    
    --accent: hsl(48, 100%, 52%);


    --bg-light:hsl(240, 4%, 7%);
    --bg: hsl(240, 4%, 15%);
    --bg-dark: hsl(0, 0%, 2%);

    --text-main: hsl(240, 4%, 95%); 
    --text-main-muted: hsl(from var(--text-main) h s calc(l - 10));
    --text-dark: hsl(240, 4%, 95%);;
    --text-header: var(--secondary);


    --button-icon: hsl(240,4%,95%);

    --shadow-s: inset 0 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;
    --shadow-m: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030, 0 4px 8px #00000015;
    --shadow-l: inset 0 1px 2px #ffffff70, 0 4px 6px #00000030, 0 6px 10px #00000015;

    --nav-button-color: var(--primary);
    --nav-button-color-disabled: hsl(0, 0%, 38%);

    --success:hsl(101, 46%, 36%);


}



body.coastal-mode {

    --bg-light: hsl(0, 0%, 100%);
    --bg: hsl(240, 4%, 95%);
    --bg-dark: hsl(240, 6%, 90%);

    --primary: #487F86;
    
    --secondary: #134C65;

    --accent: #152740;

    --tertiary: #F0ECDA;
    --tertiary-muted: #DCD4C4;

    /* text colors - main is lighter teritary is dark */
    --text-main: var(--tertiary); 
    --text-main-muted: var(--tertiary-muted);
    --text-dark: var(--secondary);
    --text-header: var(--text-main);

    --shadow-s: inset 0 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;
    --shadow-m: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030, 0 4px 8px #00000015;
    --shadow-l: inset 0 1px 2px #ffffff70, 0 4px 6px #00000030, 0 6px 10px #00000015;

    --nav-button-color: var(--primary);
    --nav-button-color-disabled: hsl(0, 0%, 38%);

    --success:hsl(101, 46%, 36%);

}


body.dark-oceanic-mode {

    --bg-light:hsl(240, 4%, 7%);
    --bg: hsl(240, 4%, 15%);
    --bg-dark: hsl(0, 0%, 2%);

    --primary: #84929b;
    
    --secondary: #536D82;

    --tertiary: #1e2c3d;

    --accent: #DDE6ED;



    --bg: hsl(240, 4%, 15%);
    --bg-dark: hsl(0, 0%, 2%);

    --text-main: hsl(240, 4%, 95%); 
    --text-main-muted: hsl(from var(--text-main) h s calc(l - 10));
    --text-dark: hsl(240, 4%, 95%);;
    --text-header: var(--secondary);


    --button-icon: hsl(240,4%,95%);

    --shadow-s: inset 0 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;
    --shadow-m: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030, 0 4px 8px #00000015;
    --shadow-l: inset 0 1px 2px #ffffff70, 0 4px 6px #00000030, 0 6px 10px #00000015;

    --nav-button-color: var(--primary);
    --nav-button-color-disabled: hsl(0, 0%, 38%);

    --success:hsl(101, 46%, 36%);

}



body.estuary-mode{

    --bg-light: hsl(0, 0%, 100%);
    --bg: hsl(240, 4%, 95%);
    --bg-dark: hsl(240, 6%, 90%);

    --primary: #025259; 
    
    --secondary: #708C69;

    --accent: #F4A258;

    --tertiary: #FCF3E3;


    /* text colors - main is lighter teritary is dark */
    --text-main: var(--tertiary); 
    --text-main-muted: hsl(from var(--text-main) h s calc(l - 10));
    --text-dark: var(--secondary);
    --text-header: var(--text-main);

    --shadow-s: inset 0 1px 2px #ffffff30, 0 1px 2px #00000030, 0 2px 4px #00000015;
    --shadow-m: inset 0 1px 2px #ffffff50, 0 2px 4px #00000030, 0 4px 8px #00000015;
    --shadow-l: inset 0 1px 2px #ffffff70, 0 4px 6px #00000030, 0 6px 10px #00000015;

    --nav-button-color: var(--primary);
    --nav-button-color-disabled: hsl(0, 0%, 38%);

    --success:hsl(101, 46%, 36%);

}