@font-face {
    font-family: "Open Sans";
    src: url("/_content/SPI_RCL/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Raleway";
    src: url("/_content/SPI_RCL/fonts/Raleway/Raleway-VariableFont_wght.ttf") format("truetype");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}


:root {
    /* Colors */
    --neutral-white: #ffffff;
    --neutral-1: #e6e6e6;
    --neutral-2: #cccccc;
    --neutral-3: #b3b3b3;
    --neutral-4: #999999;
    --neutral-5: #808080;
    --neutral-6: #666666;
    --neutral-7: #4d4d4d;
    --neutral-8: #333333;
    --neutral-9: #1a1a1a;
    --neutral-black: #000000;

    --primary-1: #f0f2f4;
    --primary-2: #cfdae2;
    --primary-3: #a9c1d6;
    --primary-4: #4d93cb;
    --primary-5: #287abd;
    --primary-6: #1b5f98;
    --primary-7: #104570;
    --primary-8: #00355f;
    --primary-9: #001c33;

    --secondary-1: #e3e8e2;
    --secondary-2: #cee6cb;
    --secondary-3: #a9dca3;
    --secondary-4: #72c267;
    --secondary-5: #3f9933;
    --secondary-6: #189108;
    --secondary-7: #0e6303;
    --secondary-8: #083c02;
    --secondary-9: #052900;

    --danger-1: #f4f0f0;
    --danger-2: #e2cfcf;
    --danger-3: #d6a9a9;
    --danger-4: #c26767;
    --danger-5: #bd2828;
    --danger-6: #981b1b;
    --danger-7: #701010;
    --danger-8: #5f0000;
    --danger-9: #330000;


    --warning-1: #fbf5e9;
    --warning-2: #f3e0be;
    --warning-3: #ebcb93;
    --warning-4: #dea84b;
    --warning-5: #c28824;
    --warning-6: #996c1c;
    --warning-7: #6c4b14;
    --warning-8: #50380f;
    --warning-9: #2b1e08;


    --shadow-color: #00000054;
    --shadow-color-inverse: #ffffff54;
    --translucent-overlay-color: #ffffff69;

    /* Typography */
    --display-font-1: 100 5rem/1.2em 'Raleway', sans-serif;
    --display-font-2: 200 4rem/1.2em 'Raleway', sans-serif;
    --display-font-3: 300 3rem/1.2em 'Raleway', sans-serif;

    --heading-font-1: 300 2.5rem/1.2em 'Raleway', sans-serif;
    --heading-font-2: 500 2rem/1.2em 'Raleway', sans-serif;
    --heading-font-3: 600 1.5rem/1.2em 'Raleway', sans-serif;

    --body-text-xl: 400 1.5rem/1.5em 'Open Sans', sans-serif;
    --body-text-large: 400 1.25rem/1.5em 'Open Sans', sans-serif;
    --body-text: 400 1rem/1.5em 'Open Sans', sans-serif;
    --body-text-small: 400 0.875rem/1.5em 'Open Sans', sans-serif;
    --body-text-xs: 400 0.75rem/1.5em 'Open Sans', sans-serif;

    --error-message-xl: italic 600 1.5rem/1.5em 'Open Sans', sans-serif;
    --error-message-large: italic 600 1.25rem/1.5em 'Open Sans', sans-serif;
    --error-message-medium: italic 600 1rem/1.5em 'Open Sans', sans-serif;
    --error-message-small: italic 600 0.875rem/1.5em 'Open Sans', sans-serif;
    --error-message-xs: italic 600 0.75rem/1.5em 'Open Sans', sans-serif;

    /* Default Sizing */
    --corner-radius-default: 8px;
    --corner-radius-checkbox: 4px;

    --horizontal-padding-default: 12px;
    --vertical-padding-default: 8px;
    --horizontal-padding-reduced: 8px;
    --vertical-padding-reduced: 4px;
    --horizontal-padding-expanded: 20px;
    --vertical-padding-expanded: 12px;

    --toggle-padding-default: 4px;
    --checkbox-padding: 2px;

    --gap-xl: 32px;
    --gap-large: 20px;
    --gap-medium: 12px;
    --gap-small: 8px;
    --gap-extra-small: 4px;

    /* Viewport Breakpoints */
    /* Override these in the consuming project's stylesheet to customize responsive behavior. */
    --bp-sm: 640px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1390px;

    /* Length Presets (rem-first defaults, override in consuming app) */
    --length-inline-xs: 6rem;
    --length-inline-sm: 15rem;
    --length-inline-md: 39.6rem;
    --length-inline-lg: 90rem;
    --length-inline-xl: 102rem;
    --length-inline-full: 114rem;

    --length-block-xs: 2.85rem;
    --length-block-sm: 7.12rem;
    --length-block-md: 14.24rem;
    --length-block-lg: 28.5rem;
    --length-block-xl: 42.72rem;
    --length-block-full: 56.94rem;

    --focus-outline-size: 4px;
    --divider-size-default: 2px;
    --scrollbar-size-default: 8px;

    --progress-bar-size-large: 12px;
    --progress-bar-size-medium: 8px;
    --progress-bar-size-small: 4px;

    --button-shrink-amt: 0.95;

    --data-grid-expander-width: calc(1rem + 2 * var(--vertical-padding-default));


    /* Defualt Shadows */
    --shadow-style-default: 0px 4px 4px 0px var(--shadow-color);
    --shadow-style-button-down: 0px 2px 2px 0px var(--shadow-color);
    --shadow-style-button-error: 0px 0px 4px 0px var(--danger-5);
    --shadow-style-button-error--disabled: 0px 0px 4px 0px var(--danger-3);

    --shadow-style-input--focused: inset 0px 2px 4px 0px var(--shadow-color);

    --text-shadow-default: 0px 4px 0.5em var(--shadow-color);
    --text-shadow-button-down: 0px 2px 0.25em var(--shadow-color);
    --path-shadow-default: 0px 0.125em 0.0625em var(--shadow-color);
    --path-shadow-button-down: 0px 0.0625em 0.05em var(--shadow-color);

    --text-shadow-inverse: 0px 4px 0.5em var(--shadow-color-inverse);
    --text-shadow-button-down-inverse: 0px 2px 0.25em var(--shadow-color-inverse);
    --path-shadow-inverse: 0px 0.125em 0.0625em var(--shadow-color-inverse);
    --path-shadow-button-down-inverse: 0px 0.0625em 0.05em var(--shadow-color-inverse);


    --button-outline-offset: calc((1lh - 1em) / 2);

}

* {
    box-sizing: border-box;
    outline-offset: 0px;
    margin: unset;
    padding: unset;
    scrollbar-color: var(--neutral-8) transparent;

}

*::-webkit-scrollbar {
    width: var(--scrollbar-size-default);
    height: var(--scrollbar-size-default);
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    border-radius: var(--corner-radius-default);
    border: 2px solid transparent;
    background-clip: content-box;
}


*::-webkit-scrollbar-button {
    display: none;
}


*::-webkit-scrollbar-thumb {
    background-color: var(--neutral-8);
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--neutral-6);
}

article {
    padding: 0px !important;
    width: 100%;
    min-height: 100dvh;
}

form {
    width: 100%;
    display: contents;
}


a:-webkit-any-link,
a,
a:hover {
    color: unset;
    text-decoration: none;
}

[data-disabled] {
    pointer-events: none;
    nav-index: -1;
}


ul {
    margin: 0px;
    list-style-type: none;
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-medium);
}

li {
    height: fit-content;
    display: inline-flex;
    align-items: center;
}

.hidden,
[hidden] {
    appearance: none;
    opacity: 0;
    display: none !important;
}

.hidden-focusable {
    position: absolute;
    inline-size: 0px;
    block-size: 0px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    opacity: 0;
}

.override {
    padding: 0;
    display: flex;
    width: max-content;
    height: max-content;
    background: unset;
    border: unset;
    outline: unset;
    box-shadow: unset;
    content: unset;

}

input::placeholder {
    color: inherit;
}