/* ------- Site Fonts ------- */
/* Inter variable – normal */
@font-face {
    font-family:'InterVar';
    src:url('../fonts/Inter-VariableFont_opsz_wght.woff2') format('woff2'),
        url('../fonts/Inter-VariableFont_opsz_wght.woff')  format('woff');
    font-weight:100 900;
    font-style:normal;
    font-display:swap; /* keeps text visible while fonts load */
  }
  
  /* Inter variable – italic */
  @font-face {
    font-family:'InterVar';
    src:url('../fonts/Inter-Italic-VariableFont_opsz_wght.woff2') format('woff2'),
        url('../fonts/Inter-Italic-VariableFont_opsz_wght.woff')  format('woff');
    font-weight:100 900;
    font-style:italic;
    font-display:swap;
  }
  
  /* Merriweather variable – normal */
  @font-face {
    font-family:'MerriVar';
    src:url('../fonts/Merriweather-VariableFont_opsz_wdth_wght.woff2') format('woff2'),
        url('../fonts/Merriweather-VariableFont_opsz_wdth_wght.woff')  format('woff');
    font-weight:300 900;
    font-style:normal;
    font-display:swap;
  }
  
  /* Merriweather variable – italic */
  @font-face {
    font-family:'MerriVar';
    src:url('../fonts/Merriweather-Italic-VariableFont_opsz_wdth_wght.woff2') format('woff2'),
        url('../fonts/Merriweather-Italic-VariableFont_opsz_wdth_wght.woff')  format('woff');
    font-weight:300 900;
    font-style:italic;
    font-display:swap;
  }
/* ------- ROOT Vars ------- */
:root {
    /* set the root font-size to 62.5%, which translates to approximately 10px. */
    /* This makea the mental conversion of the font size easier */
    /* when using em or rem (e.g. 1 rem = approx. 10 pixels, while 1.8 rem = approx. 18 pixels) */
    --base-font-size: 62.5%; /* Root = 10px */
    --default-font-size: var(--base-font-size);
    --default-text-size: 1.6rem;
    --default-header1-size: 3.5rem;
    --default-header2-size: 3.0rem;
    --default-header3-size: 2.5rem;
    --base-text-size: 1.2rem;
    --base-text-line-height: 1.5;

    /* ---------- Modern Font Stacks ---------- */
    /* Primary sans-serif stack (UI & body) */
    --base-font-family-sans-serif: 'InterVar', 'Helvetica Neue', Arial, sans-serif;  
    /* Primary serif stack (headlines & paragraphs) */
    --base-font-family-serif: 'MerriVar', Georgia, 'Times New Roman', serif;
    
    /* ---------- Spacing Vars ---------- */
    --base-page-spacing: 0;
    --base-surfaces-spacing: 1.6rem;
    --base-surfaces-border-width: 2px;
    --base-surfaces-border-width-side: 2px;
    --base-surfaces-border-radius-size: 12px;
    --base-margin-spacing: 2rem; 
    --base-padding-spacing: 2rem;
    --base-gap-spacing: 2rem;
    --base-margin-spacing-text-xsm: 0.35em;
    --base-margin-spacing-text-sm: 0.5em;
    --base-margin-spacing-text-md: 1em;
    --base-margin-spacing-text-lg: 2em;
    --base-padding-spacing-text-sm: 0.5em;
    --base-padding-spacing-text-md: 1em;
    --base-padding-spacing-text-lg: 2em;
    --base-gap-spacing-text-sm: 0.8em;
    --base-gap-spacing-text-md: 1.2em;
    --base-gap-spacing-text-lg: 1.6em;

    --base-border-radius-size: 2rem;
    --base-surfaces-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
    /* Tentative Clamp Styles */
        --font-xs: clamp(1.2rem, 0.8vw + 0.4rem, 1.4rem);
        --font-sm: clamp(1.4rem, 1vw + 0.5rem, 1.6rem);
        --font-md: clamp(1.6rem, 1.2vw + 0.6rem, 1.8rem);
        --font-lg: clamp(2rem, 2vw + 0.8rem, 2.8rem);
        --font-xl: clamp(2.5rem, 3vw + 1rem, 3.5rem);

    /* Base Color Variables */    
    /* Neutral Grey Theme Colors */
    --mui-neutral-50: #fafafa;
    --mui-neutral-100: #F5F5F5;
    --mui-neutral-200: #EEEEEE;
    --mui-neutral-300: #E0E0E0;
    --mui-neutral-350: #CCCCCC;
    --mui-neutral-400: #BDBDBD;
    --mui-neutral-500: #9E9E9E;
    --mui-neutral-600: #757575;
    --mui-neutral-700: #616161;
    --mui-neutral-800: #424242;
    --mui-neutral-900: #212121;
    /* Neutral BlueGrey Theme Colors */    
    --mui-neutral-50: #eceff1;
    --mui-neutral-100: #cfd8dc;
    --mui-neutral-200: #b0bec5;
    --mui-neutral-300: #90a4ae;
    --mui-neutral-400: #78909c;
    --mui-neutral-500: #607d8b;
    --mui-neutral-600: #546e7a;
    --mui-neutral-700: #455a64;
    --mui-neutral-800: #37474f;
    --mui-neutral-900: #263238;

    /* CLR Primary colors OLD */
    --clr-primary-25: #f2f9ff;
    --clr-primary-50: #e3f2ff;
	--clr-primary-100: #badefe;
	--clr-primary-200: #8ecaff;
	--clr-primary-300: #5eb5fe;
	--clr-primary-400: #37a5ff;
	--clr-primary-500: #0395fe;
	--clr-primary: var(--clr-primary-500);
	--clr-primary-600: #0a87f0;
	--clr-primary-700: #0c75dc;
	--clr-primary-800: #0d64ca;
	--clr-primary-900: #0b45ab;
    --clr-primary-dark-100: #13cbc7;
    --clr-primary-dark-500: #0a3a8f;
    /* CLR Complementarys OLD */    
	--clr-complementary-50: #fff8e1;
	--clr-complementary-100: #ffebb2;
	--clr-complementary-200: #ffde81;
	--clr-complementary-300: #ffd24d;
	--clr-complementary-400: #ffc726;
	--clr-complementary-500: #ffbe03;
	--clr-complementary-600: #ffb000;
	--clr-complementary-700: #ff9d00;
	--clr-complementary-800: #fe8c01;
	--clr-complementary-900: #fe6b03; /* HSB 25 99 99 */ 
	--clr-complementary: var(--clr-complementary-900);
	--clr-complementary-dark-100: #e56102; /* HSB 25 99 90 */
	--clr-complementary-dark-300: #cc5602; /* HSB 25 99 80 */
	--clr-complementary-dark-400: #b34b02; /* HSB 25 99 70 */
	--clr-complementary-dark-500: #994102; /* HSB 25 99 60 */
	--clr-complementary-dark-700: #662b01; /* HSB 25 99 40 */
	--clr-complementary-dark-900: #331601; /* HSB 25 99 20 */
    
    /* bt-portfolio-v2 primary color theme */
    --clr-primary-50: #f2f9ff;
    --clr-primary-100: #e6f4ff;
    --clr-primary-200: #b3dcfc;
    --clr-primary-300: #82c4fa;
    --clr-primary-400: #51abf5;
    --clr-primary-500: #2294f2;
	--clr-primary: var(--clr-primary-500);
    --clr-primary-600: #1478c9;
    --clr-primary-700: #0b5c9e;
    --clr-primary-800: #054375;
    --clr-primary-900: #002a4c;
    --clr-primary-dark-100: #027fe5; /* HSB 207 99 90 */
    --clr-primary-dark-300: #0271cc; /* HSB 207 99 80 */
    --clr-primary-dark-400: #0263b3; /* HSB 207 99 70 */
    --clr-primary-dark-500: #025599; /* HSB 207 99 60 */
    --clr-primary-dark-700: #013966; /* HSB 207 99 40 */
    --clr-primary-dark-900: #011c33; /* HSB 207 99 20 */
    /* bt-portfolio-v2-secondary color theme ACCENT */
    --clr-secondary-50: #f2fcff;
    --clr-secondary-100: #e6fbff;
	--clr-secondary-100: #badefe; /* old primary 100 color */
    --clr-secondary-200: #9ad8e3;
    --clr-secondary-300: #5ab6c7;
    --clr-secondary-400: #2699ad;
    --clr-secondary-400x: #518e99;
    --clr-secondary-500: #007c91;
	--clr-secondary: var(--clr-secondary-500);
    --clr-secondary-600: #006c80;
    --clr-secondary-700: #005f70;
    --clr-secondary-800: #00505e;
    --clr-secondary-900: #00414c;

	--clr-secondary-dark-100: #02c3e5; /* HSB 189 99 90 */
	--clr-secondary-dark-300: #02aecc; /* HSB 189 99 80 */
	--clr-secondary-dark-400: #0298b3; /* HSB 189 99 70 */
	--clr-secondary-dark-500: #028299; /* HSB 189 99 60 */
	--clr-secondary-dark-700: #015766; /* HSB 189 99 40 */
	--clr-secondary-dark-900: #012b33; /* HSB 189 99 20 */

    /* Supporting Colors */
    --clr-success-500: #1bfe03;
    --clr-error-500: #fe0303;
    --clr-warning-500: #feba03;
    --clr-information-500: #2c03fe;
    /* STATIC */
    --base-color-white: #ffffff;
    --base-color-black: #000000;
    --base-color-grey: var(--mui-neutral-500);
    /* Text Variables */
    --base-text-color: var(--base-color-black);
    --text-logo-fontfamily: var(--base-font-family-sans-serif);
    --text-logo-fontstyle: italic;
    --text-margin-bottom: 1.2rem;
    --text-padding-left: 2rem;
    --text-padding-right: 2rem;
    --text-padding-top: 2rem;
    --text-padding-bottom: 2rem;
    /* Button Variables Primary */
    --button-border-primary: var(--clr-secondary);
    --button-border-primary-hover: var(--clr-primary);
    --button-background-primary: var(--clr-secondary-500);
    --button-background-primary-hover: var(--base-color-white);
    --button-background-primary-active: var(--clr-secondary-700);
    --button-text-primary: var(--base-color-white);
    --button-text-primary-hover: var(--clr-primary-500);
    --button-text-primary-active: var(--clr-secondary-100);
    /* Button Variables secondary */
    --button-border-secondary: var(--clr-secondary);
    --button-background-secondary: var(--base-color-white);
    --button-background-secondary-hover: var(--clr-secondary-500);
    --button-background-secondary-active: var(--clr-secondary-700);
    --button-text-secondary: var(--clr-secondary-500);
    --button-text-secondary-hover: var(--base-color-white);
    --button-text-secondary-active: var(--clr-secondary-100);
    /* Button Variables complementary */
    --button-border-complementary: var(--clr-primary-500);
    --button-border-complementary-hover: var(--clr-secondary-500);
    --button-border-complementary-solid: var(--clr-secondary-500);
    --button-border-complementary-hover-solid: var(--clr-primary-500);
    --button-background-complementary: var(--base-color-white);
    --button-background-complementary-solid: var(--clr-secondary);
    --button-background-complementary-hover: var(--clr-secondary);
    --button-background-complementary-active: var(--clr-secondary-700);
    --button-background-complementary-active-solid: var(--clr-secondary-50);
    --button-text-complementary: var(--clr-primary-500);
    --button-text-complementary-hover: var(--base-color-white);

    --button-text-complementary-hover-solid: var(--clr-primary-500);
    --button-text-complementary-active: var(--base-color-white);
    --button-text-complementary-active-solid: var(--clr-primary-500);

    /* Dialog Variables */
    --dialog-header-background-color: var(--mui-neutral-200);
    --dialog-background-color: var(--base-color-white);
    --dialog-border-color: var(----mui-neutral-800);
    --dialog-border-width: 2px;
    /* Sidebar Variables */
    --sidebar-background-color: var(--mui-neutral-200);
    --sidebar-border-color: var(----mui-neutral-800);
    --sidebar-border-width: 2px;
    /* Box Shadow Effects */ 
    --box-shadow-flat-image: 
        6px 6px 18px 0px rgba(0,0,0,0.3);   
    --box-shadow-elevation-1: 
            0px 1px 3px rgba(0, 0, 0, 0.12),
            0px 1px 2px rgba(0, 0, 0, 0.24);
    
    --box-shadow-elevation-2:
            0px 3px 6px rgba(0, 0, 0, 0.16),
            0px 3px 6px rgba(0, 0, 0, 0.23);

    --box-shadow-elevation-3:
            0px 10px 20px rgba(0, 0, 0, 0.19),
            0px 6px 6px rgba(0, 0, 0, 0.23);

    --box-shadow-elevation-4:
            0px 14px 28px rgba(0, 0, 0, 0.25),
            0px 10px 10px rgba(0, 0, 0, 0.22);
}