/* ========================================================== */
/*                       THEME – LIGHT MODE                   */
/* ========================================================== */
:root {
  /* MAIN CONTENT */
  --bg-main:#f0f3f4;
  
  /* HEADER / FOOTER */
  --bg-header: #2a3c4a;
  --bg-footer: #2a3c4a;
  --header-footer-text: #f2f2f2;
  
  /* DESKTOP NAV */
  --desktop-text:#f2f2f2;
  --desktop-bg: rgba(141, 154, 160, 0.61); /* --desktop-bg */
  --desktop-button-bg: #f2f2f2;
  --desktop-border:#2a3c4a; /* border of sidebar + buttons */
  --desktop-section-bg: #2a3c4a; /* sections: personal, creative,  other */
  
  /* MOBILE NAV */
  --mobile-text: #f2f2f2;
  --mobile-text-dropdown:#f2f2f2;
  --mobile-bg: #272a2c; /* same as --bg-primary */
  --mobile-dropdown-bg:#f2f2f2;
  
  /* GENERAL / GLOBAL */
  --body-bg-color:#000;
  --flex-item-bg: #fafafa;
  --flex-item-text: #2a3c4a;
  --border: #272a2c; /* thumb images, hr */
  --link-color: #79b0c3; /* also applies to mobile */
  --link-hover: #71bcec; /* also applies to mobile */
  --sidebar-link-color:#414e5d; 
  --sidebar-link-hover:#414e5d; 
  --text-color: #fefefe;
  
  /* FONT FAMILY */
  --title-font: 'header-font'; /* username font */
  --title-font-size: .9em;
  --header-font:'header-font';
  --header-font-size: 1.5rem;
  --body-font:'general-font';
  --body-font-size: 1rem;
  --sidebar-header-font:'header-font';
  --sidebar-header-font-size:1rem;
  
  /* IMAGES */
  --divider-image:url('https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8C%B1%20resources/%F0%9F%8F%94%EF%B8%8F%20backgrounds/%F0%9F%8F%81%20static%20tiled/dot-tile-modified.jpeg'); /* APPLIES ON DESKTOP */
  --accent-image:url('https://images.unsplash.com/photo-1557937742-09fcc8e0ed77?q=80&w=1931&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');/* APPLIES ON DESKTOP & MOBILE */
  --user-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/118761674_hYlCkqrJqNtgh79.png'); /* APPLIES ON DESKTOP */
  --grid-image:url('https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8C%B1%20resources/%F0%9F%8F%94%EF%B8%8F%20backgrounds/%F0%9F%8F%81%20static%20tiled/greygrid.png'); /* APPLIES ON DESKTOP & MOBILE */

}

/* ========================================================== */
/*                       THEME – DARK MODE                    */
/* ========================================================== */
[data-theme='dark']{
    /* MAIN CONTENT */
  --bg-main:#3b4550;
  
  /* HEADER / FOOTER */
  --bg-header: #181d26;
  --bg-footer: #181d26;
  --header-footer-text: #e1e1e1;
  
  /* DESKTOP NAV */
  --desktop-text: #e1e1e1;
  --desktop-bg: rgba(60, 63, 69, 0.62); /* --desktop-bg */
  --desktop-button-bg: #525f6c;
  --desktop-border:#232426; /* border of sidebar + buttons */
  --desktop-section-bg: #181d26; /* sections: personal, creative,  other */
  
  /* MOBILE NAV */
  --mobile-text: #e1e1e1;
  --mobile-text-dropdown:#e1e1e1;
  --mobile-bg: #272a2c; /* same as --bg-primary */
  --mobile-dropdown-bg:#f2f2f2;
  
  /* GENERAL / GLOBAL */
  --body-bg-color:#000;
  --flex-item-bg: #525f6c;
  --flex-item-text: #e1e1e1;
  --border: #272a2c; /* thumb images, hr */
  --link-color: #79b0c3; /* also applies to mobile */
  --link-hover: #71bcec; /* also applies to mobile */
  --sidebar-link-color:#e1e1e1; 
  --sidebar-link-hover:#e1e1e1; 
  --text-color: #e1e1e1;
  
  /* FONT FAMILY */
  --title-font: 'header-font'; /* username font */
  --title-font-size: .9em;
  --header-font:'header-font';
  --header-font-size: 1.5rem;
  --body-font:'general-font';
  --body-font-size: 1rem;
  --sidebar-header-font:'header-font';
  --sidebar-header-font-size:1rem;
  
  /* IMAGES */
  --divider-image:url('https://i.pinimg.com/736x/05/fe/af/05feafb2e6b1b3361ae7697b73e9c612.jpg'); /* APPLIES ON DESKTOP */
  --accent-image:url('https://images.unsplash.com/photo-1690205073996-7fde74f5fd56?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');/* APPLIES ON DESKTOP & MOBILE */
  --user-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/118761674_hYlCkqrJqNtgh79.png'); /* APPLIES ON DESKTOP */
  --grid-image:url('https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8C%B1%20resources/%F0%9F%8F%94%EF%B8%8F%20backgrounds/%F0%9F%8F%81%20static%20tiled/blackgrid.png'); /* APPLIES ON DESKTOP & MOBILE */

}
	
/* ========================================================== */
/*                       THEME – SAGE MODE                    */
/* ========================================================== */
[data-theme='sage']{
    /* MAIN CONTENT */
  --bg-main:#b0c6a7;
  
  /* HEADER / FOOTER */
  --bg-header: #19271d;
  --bg-footer: #19271d;
  --header-footer-text: #e1e1e1;
  
  /* DESKTOP NAV */
  --desktop-text: #19271d;
  --desktop-bg: rgba(132, 147, 144, 0.49); /* --desktop-bg */
  --desktop-button-bg: #eff0e7;
  --desktop-border:#232426; /* border of sidebar + buttons */
  --desktop-section-bg: #19271d; /* sections: personal, creative,  other */
  
  /* MOBILE NAV */
  --mobile-text: #eff0e7;
  --mobile-text-dropdown:#e1e1e1;
  --mobile-bg: #272a2c; /* same as --bg-primary */
  --mobile-dropdown-bg:#f2f2f2;
  
  /* GENERAL / GLOBAL */
  --body-bg-color:#000;
  --flex-item-bg: #eff0e7;
  --flex-item-text: #19271d;
  --border: #272a2c; /* thumb images, hr */
  --link-color: #51b459; /* also applies to mobile */
  --link-hover: #90c364; /* also applies to mobile */
  --sidebar-link-color:#19271d; 
  --sidebar-link-hover:#19271d; 
  --text-color: #e1e1e1;
  
  /* FONT FAMILY */
  --title-font: 'header-font'; /* username font */
  --title-font-size: .9em;
  --header-font:'header-font';
  --header-font-size: 1.5rem;
  --body-font:'general-font';
  --body-font-size: 1rem;
  --sidebar-header-font:'header-font';
  --sidebar-header-font-size:1rem;
  
  /* IMAGES */
  --divider-image:url('https://i.pinimg.com/736x/2b/35/be/2b35be9cd5ede736c90a11d850cc5c84.jpg'); /* APPLIES ON DESKTOP */
  --accent-image:url('https://images.unsplash.com/photo-1506634064465-7dab4de896ed?q=80&w=774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');/* APPLIES ON DESKTOP & MOBILE */
  --user-image: url('https://f2.toyhou.se/file/f2-toyhou-se/images/118761674_hYlCkqrJqNtgh79.png'); /* APPLIES ON DESKTOP */
  --grid-image:url('https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8C%B1%20resources/%F0%9F%8F%94%EF%B8%8F%20backgrounds/%F0%9F%8F%81%20static%20tiled/greygrid.png'); /* APPLIES ON DESKTOP & MOBILE */

}