/** Define default root styles */
:root {
    --sp-accent: #8764b8;
    --sp-black: #000000;
    --sp-blocking-icon: #fde7e9;
    --sp-blue: #0078d4;
    --sp-blue-light: #00bcf2;
    --sp-error-background: #fde7e9;
    --sp-error-icon: #a80000;
    --sp-green: #107c10;
    --sp-green-dark: #004b1c;
    --sp-green-light: #bad80a;
    --sp-info-background: #f3f2f1;
    --sp-info-icon: #605e5c;
    --sp-magenta-light: #e3008c;
    --sp-neutral-dark: #201f1e;
    --sp-neutral-light: #edebe9;
    --sp-neutral-lighter: #f3f2f1;
    --sp-neutral-lighter-alt: #faf9f8;
    --sp-neutral-primary: #323130;
    --sp-neutral-primary-alt: #3b3a39;
    --sp-neutral-secondary: #605e5c;
    --sp-neutral-secondary-alt: #8a8886;
    --sp-neutral-tertiary: #a19f9d;
    --sp-neutral-tertiary-alt: #c8c6c4;
    --sp-neutral-quaternary: #d2d0ce;
    --sp-neutral-quaternary-alt: #e1dfdd;
    --sp-orange: #d83b01;
    --sp-primary-button-text: #ffffff;
    --sp-primary-text: #333333;
    --sp-purple: #5c2d91;
    --sp-purple-dark: #32145a;
    --sp-purple-light: #b4a0ff;
    --sp-red: #e81123;
    --sp-red-dark: #a4262c;
    --sp-severe-warning-background: #fed9cc;
    --sp-severe-warning-icon: #d83b01;
    --sp-success-background: #dff6dd;
    --sp-success-icon: #107c10;
    --sp-teal: #008272;
    --sp-theme-dark: #005a9e;
    --sp-theme-darker: #004578;
    --sp-theme-dark-alt: #106ebe;
    --sp-theme-light: #c7e0f4;
    --sp-theme-lighter: #deecf9;
    --sp-theme-lighter-alt: #eff6fc;
    --sp-theme-primary: #0078d4;
    --sp-theme-secondary: #2b88d8;
    --sp-theme-tertiary: #71afe5;
    --sp-warning-background: #fff4ce;
    --sp-warning-highlight: #ffb900;
    --sp-white: #ffffff;
    --sp-yellow: #ffb900;
    --sp-yellow-dark: #d29200;

    /* Map the Bootstrap root variables to SharePoint */
    --bs-blue: var(--sp-blue);
    --bs-indigo: var(--sp-purple-dark);
    --bs-purple: var(--sp-purple);
    --bs-pink: var(--sp-magenta-light);
    --bs-red: var(--sp-red);
    --bs-orange: var(--sp-orange);
    --bs-yellow: var(--sp-yellow);
    --bs-green: var(--sp-green);
    --bs-teal: var(--sp-teal);
    --bs-cyan: var(--sp-blue-light);
    --bs-black: var(--sp-black);
    --bs-white: var(--sp-white);
    --bs-gray: var(--sp-neutral-secondary);
    --bs-gray-dark: var(--sp-neutral-primary);
    --bs-gray-100: var(--sp-neutral-lighter-alt);
    --bs-gray-200: var(--sp-neutral-lighter);
    --bs-gray-300: var(--sp-neutral-light);
    --bs-gray-400: var(--sp-neutral-quaternary);
    --bs-gray-500: var(--sp-neutral-tertiary);
    --bs-gray-600: var(--sp-neutral-secondary);
    --bs-gray-700: var(--sp-neutral-primary-alt);
    --bs-gray-800: var(--sp-neutral-primary);
    --bs-gray-900: var(--sp-neutral-dark);
    --bs-primary: var(--sp-theme-primary);
    --bs-secondary: var(--sp-info-icon);
    --bs-success: var(--sp-success-icon);
    --bs-info: var(--sp-accent);
    --bs-warning: var(--sp-severe-warning-icon);
    --bs-danger: var(--sp-error-icon);
    --bs-light: var(--sp-neutral-lighter);
    --bs-dark: var(--sp-neutral-dark);
    --bs-primary-text-emphasis: var(--sp-theme-darker);
    --bs-secondary-text-emphasis: var(--sp-neutral-primary);
    --bs-success-text-emphasis: var(--sp-green-dark);
    --bs-info-text-emphasis: var(--sp-purple-dark);
    --bs-warning-text-emphasis: var(--sp-yellow-dark);
    --bs-danger-text-emphasis: var(--sp-red-dark);
    --bs-light-text-emphasis: var(--sp-neutral-primary-alt);
    --bs-dark-text-emphasis: var(--sp-neutral-primary-alt);
    --bs-primary-bg-subtle: var(--sp-theme-light);
    --bs-secondary-bg-subtle: var(--sp-info-background);
    --bs-success-bg-subtle: var(--sp-success-background);
    --bs-info-bg-subtle: var(--sp-theme-lighter-alt);
    --bs-warning-bg-subtle: var(--sp-warning-background);
    --bs-danger-bg-subtle: var(--sp-error-background);
    --bs-light-bg-subtle: var(--sp-neutral-lighter-alt);
    --bs-dark-bg-subtle: var(--sp-neutral-quaternary-alt);
    --bs-primary-border-subtle: var(--sp-theme-tertiary);
    --bs-secondary-border-subtle: var(--sp-neutral-tertiary-alt);
    --bs-success-border-subtle: var(--sp-green-light);
    --bs-info-border-subtle: var(--sp-purple-light);
    --bs-warning-border-subtle: var(--sp-severe-warning-background);
    --bs-danger-border-subtle: var(--sp-blocking-icon);
    --bs-light-border-subtle: var(--sp-neutral-light);
    --bs-dark-border-subtle: var(--sp-neutral-tertiary);
    --bs-body-color: var(--sp-neutral-dark);
    --bs-body-bg: var(--sp-white);
    --bs-emphasis-color: var(--sp-black);
    --bs-secondary-color: color-mix(in srgb, var(--sp-neutral-dark), transparent 25%);
    --bs-secondary-bg: var(--sp-neutral-light);
    --bs-tertiary-color: color-mix(in srgb, var(--sp-neutral-dark), transparent 50%);
    --bs-tertiary-bg: var(--sp-neutral-lighter-alt);
    --bs-link-color: var(--sp-theme-primary);
    --bs-link-hover-color: var(--sp-theme-dark);
    --bs-code-color: var(--sp-magenta-light);
    --bs-highlight-color: var(--sp-neutral-dark);
    --bs-highlight-bg: var(--sp-neutral-quaternary-alt);
    --bs-border-color: var(--sp-neutral-quaternary);
    --bs-border-color-translucent: color-mix(in srgb, var(--sp-black, #000000), transparent 82%);
    --bs-focus-ring-color: color-mix(in srgb, var(--sp-theme-primary), transparent 75%);
    --bs-form-valid-color: var(--sp-success-icon);
    --bs-form-valid-border-color: var(--sp-success-icon);
    --bs-form-invalid-color: var(--sp-error-icon);
    --bs-form-invalid-border-color: var(--sp-error-icon);
    --bs-modal-color: var(--sp-white);
    --dt-html-background: var(--sp-white) !important;
}