:root {
    --primary-color: #4f3a63;                /* branding */
    --primary-accent-color: #6c5584;         /* lighter primary */
    --secondary-color: #7a6c88;              /* buttons, highlights (muted purple-gray) */
    --secondary-accent-color: #9486a3;       /* button hover */
    --other-color: #8b9098;                  /* borders (neutral) */
    --background-color: #e8e8e8;             /* main background (neutral gray) */
    --sub-background-color: #c9c9cb;         /* panels/cards (neutral gray) */
    --accent-color: #d5d3da;                 /* subtle contrast (neutral gray) */
    --header-color: #5f5170;                 /* headers (darker muted purple) */
    --font-color: #121317;                   /* text */
    --scroll-color: #b9bec6;                 /* scroll bar */
    --input-color: #4f3a63;                  /* input focus/outline */
    --shadow: rgba(0, 0, 0, 0.14);

    /* Project section colors */
    --project-status-header-text: var(--font-color);
    --project-status-new-lead-bg: rgba(30, 64, 175, 0.34);
    --project-status-ready-for-pricing-bg: rgba(6, 95, 70, 0.34);
    --project-status-pricing-bg: rgba(146, 64, 14, 0.34);
    --project-status-awaiting-info-bg: rgba(88, 28, 135, 0.34);
    --project-status-ready-for-review-bg: rgba(157, 23, 77, 0.34);
    --project-status-sent-to-sales-bg: rgba(3, 105, 161, 0.34);
    --project-status-sent-to-customer-bg: rgba(22, 101, 52, 0.34);
    --project-status-waiting-on-subs-bg: rgba(180, 83, 9, 0.34);
    --project-status-won-bg: rgba(20, 83, 45, 0.40);
    --project-status-no-bid-bg: rgba(55, 65, 81, 0.38);
    --project-status-lost-bg: rgba(153, 27, 27, 0.38);
    --project-status-on-hold-dead-bg: rgba(31, 41, 55, 0.42);
    --project-status-redesign-bg: rgba(159, 18, 57, 0.36);
    --project-status-re-bid-bg: rgba(67, 56, 202, 0.36);
    --project-status-owner-direct-quote-bg: rgba(15, 118, 110, 0.36);

    /* Pie chart */
    --summary-material-color: #6c5584;
    --summary-hours-color: #9a7aa9;
    --summary-install-color : #6f879c;

    --app-switch-caddy-bg: #6eb471;
    --app-switch-caddy-border: #4CAF50;
    --app-switch-caddy-hover-bg: #4CAF50;
    --app-switch-caddy-hover-border: #66BB6A;

    --calendar-icon: url('/caddy/images/icons/calendar/Light Date icon.png');

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

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

body.dark {
    --primary-color: #d9cbe6;                /* branding */
    --primary-accent-color: #c7b6d8;         /* lighter primary */
    --secondary-color: #7a6c88;              /* buttons, highlights */
    --secondary-accent-color: #8e7fa0;       /* button hover */
    --other-color: #5a5a64;                  /* borders (neutral) */
    --background-color: #1f1f21;             /* main background (neutral dark gray) */
    --sub-background-color: #2d2d2d;         /* panels/cards (neutral dark gray) */
    --accent-color: #343438;                 /* subtle contrast (neutral dark gray) */
    --header-color: #c4b0d8;                 /* headers (ties to primary, not loud) */
    --font-color: #f6f6f8;                   /* text */
    --scroll-color: #3a3a3a;                 /* scroll bar */
    --input-color: #d9cbe6;                  /* input focus/outline */
    --shadow: rgba(0, 0, 0, 0.45);

    /* Project section colors */
    --project-status-header-text: var(--font-color);
    --project-status-new-lead-bg: rgba(59, 130, 246, 0.18);
    --project-status-ready-for-pricing-bg: rgba(16, 185, 129, 0.18);
    --project-status-pricing-bg: rgba(245, 158, 11, 0.18);
    --project-status-awaiting-info-bg: rgba(168, 85, 247, 0.18);
    --project-status-ready-for-review-bg: rgba(236, 72, 153, 0.18);
    --project-status-sent-to-sales-bg: rgba(14, 165, 233, 0.18);
    --project-status-sent-to-customer-bg: rgba(34, 197, 94, 0.18);
    --project-status-waiting-on-subs-bg: rgba(251, 191, 36, 0.18);
    --project-status-won-bg: rgba(22, 163, 74, 0.22);
    --project-status-no-bid-bg: rgba(107, 114, 128, 0.20);
    --project-status-lost-bg: rgba(239, 68, 68, 0.20);
    --project-status-on-hold-dead-bg: rgba(75, 85, 99, 0.22);
    --project-status-redesign-bg: rgba(244, 63, 94, 0.18);
    --project-status-re-bid-bg: rgba(99, 102, 241, 0.18);
    --project-status-owner-direct-quote-bg: rgba(20, 184, 166, 0.18);

    /* Pie chart */
    --summary-material-color: #c7b6d8;
    --summary-hours-color: #b998cb;
    --summary-install-color: #8ea9c0;

    --app-switch-caddy-bg: #469249;
    --app-switch-caddy-border: #4CAF50;
    --app-switch-caddy-hover-bg: #609f62;
    --app-switch-caddy-hover-border: #66BB6A;

    --calendar-icon: url('/caddy/images/icons/calendar/Dark Date icon.png');

    .main-image img {
        content: url("/caddy/images/login/bid-main.png");
    }
    .project-image img {
        content: url("/caddy/images/login/bid-projects.png");
    }
    .live-preview img {
        content: url("/caddy/images/login/bid-summary.png");
    }

    /* 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/CADdy-Bid.png');
    }
    #logo-container img {
        content: url('/caddy/images/logos/caddy-bid-dark.png');
    }
    #share-equipment img {
        content: url("/caddy/images/icons/share/send-dark.png");
    }
    #create-project img,
    #create-estimate img, 
    .add-estimate, 
    .hours-add-row-btn, 
    #admin-misc-add-btn,
    #packages-add-btn,
    #cost-codes-add-btn,
    #install-add-btn,
    #hours-add-btn,
    #items-add-btn,
    #estimate-hours-add,
    #estimate-system-add,
    #add-admin-item-btn,
    #admin-users-add-btn,
    .estimate-hours-section-add-btn,
    .project-links-add-icon
    {
        content: url("/caddy/images/icons/add/dark mode plus icon.png");
        background-image: url("/caddy/images/icons/add/dark mode plus icon.png");
    }
    #prev-page img,
    #prev-equipment img {
        content: url("/caddy/images/icons/arrow/left-arrow-dark.png");
        background-image: url("/caddy/images/icons/arrow/left-arrow-dark.png");
    }
    #next-page img,
    #next-equipment img {
        content: url("/caddy/images/icons/arrow/right-arrow-dark.png");
        background-image: url("/caddy/images/icons/arrow/right-arrow-dark.png");
    }
    .edit-estimate-button img, 
    .project-estimate-edit .icon-edit, 
    .admin-package-edit-btn {
        background-image: url("/caddy/images/icons/edit/dark mode edit icon.png");
        content: url("/caddy/images/icons/edit/dark mode edit icon.png");
    }
    #filter-projects img,
    .admin-package-filter-btn,
    .estimate-sidebar-filter-btn {
        content: url("/caddy/images/icons/filter/dark-filter.png");
        background-image: url("/caddy/images/icons/filter/dark-filter.png");
    }
    .admin-package-delete-btn, 
    .admin-package-remove-btn, 
    .admin-cost-code-delete-btn, 
    .project-estimate-delete 
    .icon-trash, 
    #estimate-bulk-delete,
    #delete-project-btn img,
    .project-link-remove-icon,
    #estimate-system-delete {
        background-image: url("/caddy/images/icons/trashcan/Dark Trashcan.png");
        content: url("/caddy/images/icons/trashcan/Dark Trashcan.png");
    }
    .project-estimate-logs .icon-logs {
        content: url("/caddy/images/icons/friend/dark-bell.png");
    }
    #estimate-bulk-duplicate, .project-estimate-duplicate .icon-duplicate {
        background-image: url("/caddy/images/icons/add/duplicate-dark.png");
        content: url("/caddy/images/icons/add/duplicate-dark.png");
    }
    #estimate-bulk-qty-up, #estimate-bulk-qty-down {
        background-image: url("/caddy/images/icons/add/increase-dark.png");
    }
    #estimate-system-prev, #estimate-hours-system-prev, #estimate-system-next, #estimate-hours-system-next, .de-copy-project-pagination #de-copy-project-prev, #de-copy-project-next {
        background-image: url("/caddy/images/icons/arrow/up-arrow-dark.png");
    }
    .admin-save-btn {
        background-image: url("/caddy/images/icons/save/dark mode save icon.png");
    }
    .admin-package-back-btn {
        background-image: url("/caddy/images/icons/arrow/dark-back.png");
    }
    .collapse-icon, .summary-section-icon {
        background-image: url('/caddy/images/icons/collapse/dark collapse.png');
        content: url('/caddy/images/icons/collapse/dark collapse.png');
    }
    .calculator-button {
        background-image: url("/caddy/images/icons/calculator/calculator-dark.png")
    }
    .app-link-image img {
        content: url('/caddy/images/login/dark desktop main.png')
    }
    .app-switch-banner-logo img {
        content: url('/caddy/images/logos/dark long logo.png');
    }
    .project-update-like-btn {
        background-image: url('/caddy/images/icons/updates/dark-like.png');
    }
    .project-update-view-btn {
        background-image: url('/caddy/images/icons/updates/dark-view.png');
    }
    .project-chat-icon {
        content: url('/caddy/images/icons/updates/dark-chat.png');
    }
}