:root {
    /* LIGHT THEME COLORS */
    --primary-color: #388E3C;                /* branding, headers (dark green) */
    --primary-accent-color: #4CAF50;         /* slightly lighter green */
    --secondary-color: #66BB6A;              /* buttons, highlights (medium green) */
    --other-color: #357F36;                  /* extra color for light mode to have darker borders */
    --secondary-accent-color: #A5D6A7;       /* button hover (slightly lighter green) */
    --background-color: #F0F2F1;             /* main background (light gray) */
    --sub-background-color: #CCCCCC;         /* side panels, etc (lighter gray) */
    --accent-color: #d3d3d3;                 /* lighter gray than subbackground */
    --header-color: #2E7D32;                 /* dark green for headers */
    --font-color: #333333;                   /* text (dark gray) */
    --scroll-color: #AAAAAA;                 /* scroll bar */
    --input-color: #357F36;
    --shadow: rgba(0,0,0,0.16);

    /* STAGE DIMENSIONS */
    --stage-max-width: 1200px;                /* maximum width of the stage */
    --stage-aspect-ratio: 16/9;               /* width:height ratio of the stage */

    /* USER RULES */
    user-select: none;
}

body.dark {
    /* DARK THEME COLORS */
    --primary-color: #388E3C;            /* branding, headers (green) */
    --primary-accent-color: #4CAF50;     /* lighter green */
    --secondary-color: #3E8E41;          /* buttons, highlights (medium green) */
    --other-color: #3E8E41;              /* extra color for borders */
    --secondary-accent-color: #66BB6A;   /* button hover (lighter green) */
    --background-color: #202020;         /* main background (dark gray) */
    --sub-background-color: #2E2E2E;     /* side panels (medium dark gray) */
    --accent-color: #333333;             /* lighter gray than sub-background */
    --header-color: #1B5E20;             /* dark green for header */
    --font-color: #E0E0E0;               /* text (light gray) */
    --scroll-color: #444444;             /* scroll bar */
    --input-color: #388E3C;
    --shadow: rgba(241, 241, 241, 0.05);

    /* UPDATE ICONS FOR HEADER*/
    #options-button .icon {
        content: url('/caddy/images/icons/menu/Light Options.png')
    }
    #light-dark-button .icon {
        content: url('/caddy/images/icons/toggle/light mode icon.png')
    }
    #logout-button .icon {
        content: url('/caddy/images/icons/logout/dark logout.png')
    }
    #home-button .icon, #back-button .icon {
        content: url('/caddy/images/icons/home/dark mode home.png')
    }
    #screensaver-logo {
        content: url('/caddy/images/logos/dark long logo.png')
    }
    #logo-container img {
        content: url('/caddy/images/logos/dark long logo.png')
    }
    #edit-button .icon, .edit img, .edit-favorite-button img {
        content: url('/caddy/images/icons/edit/dark mode edit icon.png')
    }
    .arrow {
        content: url('/caddy/images/icons/collapse/dark collapse.png')
    }
    .save-button-right img {
        content: url('/caddy/images/icons/save/dark mode save icon.png')
    }
    .compile-button-right.compile img {
        content: url('/caddy/images/icons/compile/dark compile.png')
    }
    .compile-button-right.publish img {
        content: url('/caddy/images/icons/compile/dark publish.png')
    }
    .add-equipment-button img, #create-project img {
        content: url('/caddy/images/icons/add/dark mode plus icon.png')
    }
    .delete-project-button img, .delete-favorite-button img, .delete-equipment-button img {
        content: url('/caddy/images/icons/trashcan/Dark Trashcan.png')
    }
    .favorite-equipment-button img, .favorites-button img {
        content: url('/caddy/images/icons/favorite/star dark.png')
    }
    .share-button img{
        content: url('/caddy/images/icons/share/send-dark.png')
    }
    .prev-equipment img, #prev-page img, #friends-prev img, .left-arrow img{
        content: url('/caddy/images/icons/arrow/left-arrow-dark.png')
    }
    .next-equipment img, #next-page img, #friends-next img, .right-arrow img {
        content: url('/caddy/images/icons/arrow/right-arrow-dark.png')
    }
    .invite-btn img{
        content: url('/caddy/images/icons/share/share-dark.png')
    }
    .back-arrow-icon {
        background-image: url('/caddy/images/icons/arrow/dark-back.png')
    }
    .sidebar-arrow {
        background-image: url('/caddy/images/icons/arrow/right-arrow-dark.png')
    }
    .tutorial-arrow {
        content: url('/caddy/images/icons/arrow/up-arrow-dark.png')
    }
    .main-image img {
        content: url('/caddy/images/login/dark desktop main.png')
    }
    .project-image img, .carousel-project img {
        content: url('/caddy/images/login/dark desktop project.png')
    }
    .live-preview img {
        content: url('/caddy/images/login/dark live-preview.gif')
    }
    .points img {
        content: url('/caddy/images/login/dark points list.png')
    }
    .sequence img {
        content: url('/caddy/images/login/dark SOP.png')
    }
    .pw-toggle img.pw-icon {
        content: url('/caddy/images/icons/login/password-dark.png')
    }
    .carousel-caddy img {
        content: url('/caddy/images/icons/login/caddy-ui.png')
    }
    .carousel-export img {
        content: url('/caddy/images/icons/login/export-dark.png')
    }
    .deny-btn img, .remove-btn img, .cancel-btn img {
        content: url('/caddy/images/icons/friend/dark-x.png')
    }
    .accept-btn img {
        content: url('/caddy/images/icons/friend/dark-checked.png')
    }
    .bell-read img {
        content: url('/caddy/images/icons/friend/dark-bell.png')
    }
    .bell-unread img {
        content: url('/caddy/images/icons/friend/dark-notification-bell.png')
    }
    .friends-btn img, .expand-btn img {
        content: url('/caddy/images/icons/friend/dark-friends.png')
    }
    .requests-btn img {
        content: url('/caddy/images/icons/friend/dark-add-friend.png')
    }
    .collapse-btn img {
        content: url('/caddy/images/icons/friend/dark-collapse.png')
    }
    .view-logs-btn img {
        content: url('/caddy/images/icons/share/dark-history.png')
    }
    .btn-back img {
        content: url('/caddy/images/icons/arrow/dark-back.png')
    }
}