:root,
[data-bs-theme="light"] {

    /* #region Main colors */

        /* 
            IMPORTANT!!!
            --------------------------------------
            Hey guys, if you find any color usage floating around in the code, please replace it with the appropriate custom palette variable or add a variable here so we can handle everything from here 
            I tried with some stuff like the tremco green elements, and the selected node active class. There might (will) be more pending stuff to address.
            Remember, this is to standardize our color usage across the project.
            --------------------------------------
            IMPORTANT!!!
        */ 

        /* Custom Olympia palette */
        --olympia-tremco-green: #00b09b;
        --olympia-blue: #0d6efd;
        --olympia-light-blue: color-mix(in srgb, var(--olympia-blue) 30%, white);
        --olympia-white: #FCFCFB;
        --olympia-gray-100: #F6F6F5;
        --olympia-gray-200: #E8E8E7;
        --olympia-gray-300: #DADAD8;
        --olympia-gray-400: #C3C3BF;
        --olympia-gray-500: #B1B0AC;
        --olympia-gray-600: #72726F;
        --olympia-gray-700: #4E4E4C;
        --olympia-gray-800: #393937;
        --olympia-gray-900: #242423;
        --olympia-gray: var(--olympia-gray-600);
        --olympia-gray-dark: var(--olympia-gray-900);
        

        /* Base colors from Bootstrap 5.3 (every element color is determined by these base colors)
        Each one falls back to the stock Bootstrap hex if no matching --olympia-color is defined above */
        --bs-blue: var(--olympia-blue, #0d6efd);
        --bs-indigo: var(--olympia-indigo, #6610f2);
        --bs-purple: var(--olympia-purple, #6f42c1);
        --bs-pink: var(--olympia-pink, #d63384);
        --bs-red: var(--olympia-red, #dc3545);
        --bs-orange: var(--olympia-orange, #fd7e14);
        --bs-yellow: var(--olympia-yellow, #ffc107);
        --bs-green: var(--olympia-green, #198754);
        --bs-teal: var(--olympia-teal, #20c997);
        --bs-cyan: var(--olympia-cyan, #0dcaf0);
        --bs-black: var(--olympia-black, #000000);
        --bs-white: var(--olympia-white, #ffffff);
        --bs-gray-100: var(--olympia-gray-100, #f8f9fa);
        --bs-gray-200: var(--olympia-gray-200, #e9ecef);
        --bs-gray-300: var(--olympia-gray-300, #dee2e6);
        --bs-gray-400: var(--olympia-gray-400, #ced4da);
        --bs-gray-500: var(--olympia-gray-500, #adb5bd);
        --bs-gray-600: var(--olympia-gray-600, #6c757d);
        --bs-gray-700: var(--olympia-gray-700, #495057);
        --bs-gray-800: var(--olympia-gray-800, #343a40);
        --bs-gray-900: var(--olympia-gray-900, #212529);
        --bs-gray: var(--bs-gray-600);
        --bs-gray-dark: var(--bs-gray-800);

    /* #endregion */

    /*
        IMPORTANT!!!
        --------------------------------------
        Hey guys, from now on, please do not modify anything (unless we have a pending set of classes to override). Any main color change has to be done in the declarations above
        -------------------------------------- 
        IMPORTANT!!!
    */

    /* #region color assignments */

        /* Theme colors: just references to the base colors above */
        --bs-primary: var(--bs-blue);
        --bs-secondary: var(--bs-gray-600);
        --bs-success: var(--bs-green);
        --bs-info: var(--bs-cyan);
        --bs-warning: var(--bs-yellow);
        --bs-danger: var(--bs-red);
        --bs-light: var(--bs-gray-100);
        --bs-dark: var(--bs-gray-900);

        /* These map to the runtime-generated "-rgb" twins, same name pattern as above */
        --bs-primary-rgb: var(--bs-blue-rgb);
        --bs-secondary-rgb: var(--bs-gray-600-rgb);
        --bs-success-rgb: var(--bs-green-rgb);
        --bs-info-rgb: var(--bs-cyan-rgb);
        --bs-warning-rgb: var(--bs-yellow-rgb);
        --bs-danger-rgb: var(--bs-red-rgb);
        --bs-light-rgb: var(--bs-gray-100-rgb);
        --bs-dark-rgb: var(--bs-gray-900-rgb);

        /* Emphasis/subtle/border variants: tints & shades computed from the theme colors above */
        --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 60%, black);
        --bs-secondary-text-emphasis: color-mix(in srgb, var(--bs-secondary) 60%, black);
        --bs-success-text-emphasis: color-mix(in srgb, var(--bs-success) 60%, black);
        --bs-info-text-emphasis: color-mix(in srgb, var(--bs-info) 60%, black);
        --bs-warning-text-emphasis: color-mix(in srgb, var(--bs-warning) 60%, black);
        --bs-danger-text-emphasis: color-mix(in srgb, var(--bs-danger) 60%, black);
        --bs-light-text-emphasis: var(--bs-gray-700);
        --bs-dark-text-emphasis: var(--bs-gray-700);

        --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 15%, white);
        --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) 15%, white);
        --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 15%, white);
        --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) 15%, white);
        --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 15%, white);
        --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 15%, white);
        --bs-light-bg-subtle: color-mix(in srgb, var(--bs-light) 50%, white);
        --bs-dark-bg-subtle: var(--bs-gray-400);

        --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 40%, white);
        --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) 40%, white);
        --bs-success-border-subtle: color-mix(in srgb, var(--bs-success) 40%, white);
        --bs-info-border-subtle: color-mix(in srgb, var(--bs-info) 40%, white);
        --bs-warning-border-subtle: color-mix(in srgb, var(--bs-warning) 40%, white);
        --bs-danger-border-subtle: color-mix(in srgb, var(--bs-danger) 40%, white);
        --bs-light-border-subtle: var(--bs-gray-200);
        --bs-dark-border-subtle: var(--bs-gray-500);

        /* Typography and body: these drive the white/light backgrounds of cards, inputs, button text areas, etc. */
        --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --bs-body-font-family: var(--bs-font-sans-serif);
        --bs-body-color-rgb: var(--bs-gray-900-rgb);
        --bs-body-color: rgb(var(--bs-body-color-rgb));
        --bs-body-bg-rgb: var(--bs-white-rgb);
        --bs-body-bg: rgb(var(--bs-body-bg-rgb));
        --bs-emphasis-color-rgb: var(--bs-black-rgb);
        --bs-emphasis-color: rgb(var(--bs-emphasis-color-rgb));
        --bs-secondary-color-rgb: var(--bs-gray-900-rgb);
        --bs-secondary-color: rgba(var(--bs-secondary-color-rgb), 0.75);
        --bs-secondary-bg-rgb: var(--bs-gray-200-rgb);
        --bs-secondary-bg: rgb(var(--bs-secondary-bg-rgb));
        --bs-tertiary-color-rgb: var(--bs-gray-900-rgb);
        --bs-tertiary-color: rgba(var(--bs-tertiary-color-rgb), 0.5);
        --bs-tertiary-bg-rgb: var(--bs-gray-100-rgb);
        --bs-tertiary-bg: rgb(var(--bs-tertiary-bg-rgb));

        /* Borders, links and focus */
        --bs-border-color: var(--bs-gray-300);
        --bs-border-color-translucent: rgba(var(--bs-black-rgb), 0.175);
        --bs-link-color-rgb: var(--bs-primary-rgb);
        --bs-link-color: rgb(var(--bs-link-color-rgb));
        --bs-link-hover-color: color-mix(in srgb, var(--bs-link-color) 80%, black);
        --bs-link-hover-color-rgb: var(--bs-link-color-rgb);
        --bs-code-color: var(--bs-pink);
        --bs-highlight-bg: var(--bs-warning-bg-subtle);
        --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);

    /* #endregion */
}

/* #region Component overrides */

    /* Button overrides */
    .btn-primary {
        --bs-btn-bg: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black);
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 80%, black);
        --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 75%, black);
        --bs-btn-disabled-bg: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    }

    .btn-secondary {
        --bs-btn-bg: var(--bs-secondary);
        --bs-btn-border-color: var(--bs-secondary);
        --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 80%, black);
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 80%, black);
        --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 75%, black);
        --bs-btn-disabled-bg: var(--bs-secondary);
        --bs-btn-disabled-border-color: var(--bs-secondary);
        --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    }

    .btn-success {
        --bs-btn-bg: var(--bs-success);
        --bs-btn-border-color: var(--bs-success);
        --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, black);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 80%, black);
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 80%, black);
        --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 75%, black);
        --bs-btn-disabled-bg: var(--bs-success);
        --bs-btn-disabled-border-color: var(--bs-success);
        --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    }

    .btn-info {
        --bs-btn-bg: var(--bs-info);
        --bs-btn-border-color: var(--bs-info);
        --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 85%, black);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 80%, black);
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 80%, black);
        --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 75%, black);
        --bs-btn-disabled-bg: var(--bs-info);
        --bs-btn-disabled-border-color: var(--bs-info);
        --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    }

    .btn-warning {
        --bs-btn-bg: var(--bs-warning);
        --bs-btn-border-color: var(--bs-warning);
        --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 85%, black);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 80%, black);
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 80%, black);
        --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 75%, black);
        --bs-btn-disabled-bg: var(--bs-warning);
        --bs-btn-disabled-border-color: var(--bs-warning);
        --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    }

    .btn-danger {
        --bs-btn-bg: var(--bs-danger);
        --bs-btn-border-color: var(--bs-danger);
        --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, black);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 80%, black);
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 80%, black);
        --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 75%, black);
        --bs-btn-disabled-bg: var(--bs-danger);
        --bs-btn-disabled-border-color: var(--bs-danger);
        --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    }

    .btn-light {
        --bs-btn-bg: var(--bs-light);
        --bs-btn-border-color: var(--bs-light);
        --bs-btn-hover-bg: color-mix(in srgb, var(--bs-light) 90%, black);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-light) 85%, black);
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-light) 85%, black);
        --bs-btn-active-border-color: color-mix(in srgb, var(--bs-light) 80%, black);
        --bs-btn-disabled-bg: var(--bs-light);
        --bs-btn-disabled-border-color: var(--bs-light);
        --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
    }

    .btn-dark {
        --bs-btn-bg: var(--bs-dark);
        --bs-btn-border-color: var(--bs-dark);
        --bs-btn-hover-bg: color-mix(in srgb, var(--bs-dark) 85%, white);
        --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-dark) 80%, white);
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-dark) 80%, white);
        --bs-btn-active-border-color: color-mix(in srgb, var(--bs-dark) 75%, white);
        --bs-btn-disabled-bg: var(--bs-dark);
        --bs-btn-disabled-border-color: var(--bs-dark);
        --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
    }

    .btn-outline-primary {
        --bs-btn-color: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
        --bs-btn-disabled-color: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    }

    .btn-outline-secondary {
        --bs-btn-color: var(--bs-secondary);
        --bs-btn-border-color: var(--bs-secondary);
        --bs-btn-hover-bg: var(--bs-secondary);
        --bs-btn-hover-border-color: var(--bs-secondary);
        --bs-btn-active-bg: var(--bs-secondary);
        --bs-btn-active-border-color: var(--bs-secondary);
        --bs-btn-disabled-color: var(--bs-secondary);
        --bs-btn-disabled-border-color: var(--bs-secondary);
        --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
    }

    .btn-outline-success {
        --bs-btn-color: var(--bs-success);
        --bs-btn-border-color: var(--bs-success);
        --bs-btn-hover-bg: var(--bs-success);
        --bs-btn-hover-border-color: var(--bs-success);
        --bs-btn-active-bg: var(--bs-success);
        --bs-btn-active-border-color: var(--bs-success);
        --bs-btn-disabled-color: var(--bs-success);
        --bs-btn-disabled-border-color: var(--bs-success);
        --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
    }

    .btn-outline-info {
        --bs-btn-color: var(--bs-info);
        --bs-btn-border-color: var(--bs-info);
        --bs-btn-hover-bg: var(--bs-info);
        --bs-btn-hover-border-color: var(--bs-info);
        --bs-btn-active-bg: var(--bs-info);
        --bs-btn-active-border-color: var(--bs-info);
        --bs-btn-disabled-color: var(--bs-info);
        --bs-btn-disabled-border-color: var(--bs-info);
        --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
    }

    .btn-outline-warning {
        --bs-btn-color: var(--bs-warning);
        --bs-btn-border-color: var(--bs-warning);
        --bs-btn-hover-bg: var(--bs-warning);
        --bs-btn-hover-border-color: var(--bs-warning);
        --bs-btn-active-bg: var(--bs-warning);
        --bs-btn-active-border-color: var(--bs-warning);
        --bs-btn-disabled-color: var(--bs-warning);
        --bs-btn-disabled-border-color: var(--bs-warning);
        --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
    }

    .btn-outline-danger {
        --bs-btn-color: var(--bs-danger);
        --bs-btn-border-color: var(--bs-danger);
        --bs-btn-hover-bg: var(--bs-danger);
        --bs-btn-hover-border-color: var(--bs-danger);
        --bs-btn-active-bg: var(--bs-danger);
        --bs-btn-active-border-color: var(--bs-danger);
        --bs-btn-disabled-color: var(--bs-danger);
        --bs-btn-disabled-border-color: var(--bs-danger);
        --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
    }

    .btn-outline-light {
        --bs-btn-color: var(--bs-light);
        --bs-btn-border-color: var(--bs-light);
        --bs-btn-hover-bg: var(--bs-light);
        --bs-btn-hover-border-color: var(--bs-light);
        --bs-btn-active-bg: var(--bs-light);
        --bs-btn-active-border-color: var(--bs-light);
        --bs-btn-disabled-color: var(--bs-light);
        --bs-btn-disabled-border-color: var(--bs-light);
        --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
    }

    .btn-outline-dark {
        --bs-btn-color: var(--bs-dark);
        --bs-btn-border-color: var(--bs-dark);
        --bs-btn-hover-bg: var(--bs-dark);
        --bs-btn-hover-border-color: var(--bs-dark);
        --bs-btn-active-bg: var(--bs-dark);
        --bs-btn-active-border-color: var(--bs-dark);
        --bs-btn-disabled-color: var(--bs-dark);
        --bs-btn-disabled-border-color: var(--bs-dark);
        --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
    }

    /* Form control overrides */
    .form-control:focus,
    .form-select:focus,
    .form-check-input:focus {
        border-color: color-mix(in srgb, var(--bs-primary) 50%, white);
        box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    }

    .form-check-input:checked,
    .form-check-input[type="checkbox"]:indeterminate {
        background-color: var(--bs-primary);
        border-color: var(--bs-primary);
    }

    .form-range::-webkit-slider-thumb {
        background-color: var(--bs-primary);
    }
    .form-range::-webkit-slider-thumb:active {
        background-color: color-mix(in srgb, var(--bs-primary) 50%, white);
    }
    .form-range::-moz-range-thumb {
        background-color: var(--bs-primary);
    }
    .form-range::-moz-range-thumb:active {
        background-color: color-mix(in srgb, var(--bs-primary) 50%, white);
    }

/* #endregion */