:root {
    /**Common*/
    --white: #ffffff;
    --catalyst-dark: #272931;
    --low-opacity-scrim-layer: #333333b2;

    /** Light Theme Primary*/
    --light-default-blue: #4570e1;
    --light-hover-blue: #1240bd;
    --light-active-blue: #0d3092;
    --light-primary-hover: #ecf1fc;
    --light-primary-active: #dae2f9;

    /**Light Theme Content*/
    --light-medium-priority: #4c5060;
    --light-low-priority: #70768e;
    --light-non-text-contrast-dark: #b7b7b7;
    --light-non-text-contrast-light: #d3d3d3;
    --light-surface-colors-light-one: #fafafa;

    /**Light Theme Surfaces*/
    --light-surface-one: #f5f5f5;
    --light-surface-two: #f0f0f0;
    --light-surface-three: #ebebeb;
    --light-surface-disabled: #c9cacd;

    /**Light Theme Feedback Colors*/

    --light-positive-feedback: #51a800;
    --light-high-priority-warning-feedback: #ee0000;
    --light-warning-feedback: #e57300;

    /**Light Theme Low-Opacity*/
    --light-low-opacity-hover: #4570e11a;
    --light-low-opacity-active: #4570e133;
    --light-low-opacity-translucent-surface: #ebebebcc;
    --light-low-opacity-alternate-hover: #ba5dd126;
    --light-low-opacity-alternate-active: #4570e10d;

    /**Dark Theme Primary*/
    --dark-default-blue: #c2fcff;
    --dark-hover-blue: #d4fdff;
    --dark-active-blue: #e5ffff;
    --dark-primary-hover: #50596e;
    --dark-primary-active: #697499;

    /**Dark Theme Content*/
    --dark-medium-priority: #cccccc;
    --dark-low-priority: #bababa;
    --dark-non-text-contrast-light: #5e6786;
    --dark-non-text-contrast-dark: #4d556f;

    /**Dark Theme Surfaces*/
    --dark-surface-one-dp: #2e313a;
    --dark-surface-two-dp: #323640;
    --dark-surface-four-dp: #373c47;
    --dark-surface-eight-dp: #3d434f;
    --dark-surface-sixteen-dp: #414855;
    --dark-surface-disabled: #55565f;

    /**Dark Theme Feedback Colors*/
    --dark-positive-feedback: #b4ffc5;
    --dark-high-priority-warning-feedback: #ffa1a1;
    --dark-warning-feedback: #ffb770;

    /**Dark Theme Low-Opacity*/
    --dark-low-opacity-hover: #a6b7ff26;
    --dark-low-opacity-active: #a6b7ff66;
    --dark-low-opacity-translucent-surface: #414855cc;
    --dark-low-opacity-alternate-hover: #c3faff1a;
    --dark-low-opacity-alternate-active: #c3faff33;

    --misc-light-gray: #dadada;

    /** Default Heights **/
    --default-header-height: 4rem;
}