:root {
    /** Color Variables **/
    --accent-color: #37c2ac;
    --accent-color-dark: #30a290;
    --component-border-color: #ccc;

    /** Font Size Variables **/
    --body-font-size: 16px;
    --chip-font-size: 14px;
    --small-font-size: 12px;
    --heading1-font-size: 50px;
    --heading2-font-size: 38px;
    --heading3-font-size: 28px;
    --heading4-font-size: 21px;
    --heading5-font-size: 12px;

    /** Font Weight Variables **/
    --body-font-weight: normal;
    --bold-font-weight: bold;
    --heavy-font-weight: bolder;

    /** Font Variables **/
    --heading-font-family: "Atak", sans-serif;
    --body-font-family: "Atak", sans-serif;

    /** Padding and Margin Variables **/
    --spacing: 4px;
    --spacing-2x: 8px;
    --spacing-3x: 12px;
    --spacing-4x: 16px;
    --spacing-5x: 20px;
    --spacing-6x: 24px;
    --spacing-7x: 28px;
    --spacing-8x: 32px;
    --spacing-9x: 36px;
    --spacing-10x: 40px;
    --spacing-11x: 44px;
    --spacing-12x: 48px;
    --spacing-13x: 52px;
    --spacing-14x: 56px;
    --spacing-15x: 60px;
    --spacing-16x: 64px;
    --spacing-17x: 68px;
    --spacing-18x: 72px;
    --spacing-19x: 76px;
    --spacing-20x: 80px;

    /* Updated Brand Colors */
    --teal-50-hover-color: #194e57;
    --teal-50-pressed-color: #133c44;
    --teal-50-color: #1f616d;
    --teal-40-color: #18929a;
    --teal-40-hover-color: #157e84;
    --teal-40-pressed-color: #11696e;
    --teal-30-color: #7cdcd1;
    --teal-30-hover-color: #66d6c9;
    --teal-30-pressed-color: #52d1c2;
    --teal-20-color: #c0eee8;
    --teal-10-color: #e7f8f5;
    --teal-10-hover-color: #d4f2ed;
    --teal-10-pressed-color: #c0ede5;

    --red-50-color: #f35c2b;
    --red-40-color: #f5774e;
    --red-40-hover-color: #f46334;
    --red-40-pressed-color: #f2511c;
    --red-30-color: #f79272;
    --red-20-color: #fbc9b8;
    --red-10-color: #fdded5;

    --yellow-50-color: #f8fc52;
    --yellow-50-hover-color: #f7fc36;
    --yellow-50-pressed-color: #f6fb1d;
    --yellow-40-color: #f9fc6f;
    --yellow-40-hover-color: #f8fc55;
    --yellow-40-pressed-color: #f7fb3c;
    --yellow-30-color: #fafd8c;
    --yellow-20-color: #fdfec5;
    --yellow-10-color: #fefedc;

    --green-tint-color: #72f380;
    --green-tint-hover-color: #5bf16b;
    --green-tint-pressed-color: #43ef56;

    --blue-tint-color: #75d3fd;
    --blue-tint-hover-color: #63cdfd;
    --blue-tint-pressed-color: #4ac5fc;

    --charcoal-50-color: #393c3c;
    --charcoal-40-color: #5a5c5c;
    --charcoal-30-color: #7b7d7d;
    --charcoal-20-color: #bdbebe;
    --charcoal-10-color: #d7d8d8;
    --charcoal-10-hover-color: #cccccc;
    --charcoal-10-pressed-color: #bfc0c0;
    --charcoal-1-color: #f2f2f2;
    --charcoal-1-hover-color: #e5e6e6;
    --charcoal-1-pressed-color: #d8d9d9;

    --charcoal-50-transparent-75-color: rgba(57, 60, 60, 0.75);
    --charcoal-50-transparent-50-color: rgba(57, 60, 60, 0.5);
    --charcoal-50-transparent-25-color: rgba(57, 60, 60, 0.25);

    --sand-color: #fcf8f4;

    --white-color: #ffffff;
    --white-hover-color: #f2f2f2;
    --white-pressed-color: #e5e6e6;

    --white-transparent-90-color: rgba(255, 255, 255, 0.9);
    --white-transparent-75-color: rgba(255, 255, 255, 0.75);
    --white-transparent-50-color: rgba(255, 255, 255, 0.5);
    --white-transparent-25-color: rgba(255, 255, 255, 0.25);
    /* End updated brand colors */

    /** Colors **/
    --transparent-color: transparent;
    --other-note-color: #ff00ff;

    --trace-shade-color: var(--teal-50-color);
    --trace-shade2-color: var(--teal-40-color);
    --trace-regular-color: var(--teal-40-color);
    --trace-color: var(--teal-40-color);
    --trace-tint1-color: var(--teal-20-color);
    --trace-tint2-color: var(--teal-10-color);

    --rust-shade-color: var(--yellow-50-color);
    --rust-regular-color: var(--yellow-40-color);
    --rust-color: var(--yellow-30-color);
    --rust-tint1-color: var(--yellow-20-color);
    --rust-tint2-color: var(--yellow-10-color);

    --sky-shade-color: #468bac;
    --sky-shade2-color: #5ebbe8;
    --sky-regular-color: #64c6f6;
    --sky-color: #64c6f6;
    --sky-tint1-color: #93d7f9;
    --sky-tint2-color: #c1e8fb;

    --error-shade-color: #a53a47;
    --error-shade2-color: #e04f61;
    --error-regular-color: #ec5366;
    --error-color: #ec5366;
    --error-tint1-color: #f28794;
    --error-tint2-color: #fdeef0;

    --warning-shade-color: #b08819;
    --warning-regular-color: #fbc224;
    --warning-color: #fbc224;
    --warning-tint1-color: #fcd466;
    --warning-tint2-color: #fef3d3;

    --confirmed-shade-color: #589417;
    --confirmed-regular-color: #7ed321;
    --confirmed-color: #7ed321;
    --confirmed-tint1-color: #a5e064;
    --confirmed-tint2-color: #e5f6d3;

    --black-color: #323333;
    --pure-black-color: #000000;
    --grey1-color: var(--charcoal-40-color);
    --grey2-color: var(--charcoal-30-color);
    --grey3-color: var(--charcoal-20-color);
    --grey4-color: var(--charcoal-1-color);
    --grey4-pressed-color: var(--charcoal-1-pressed-color);
    --grey5-color: var(--charcoal-1-color);
    --white1-color: #f8fafa;
    --white2-color: #ffffff;

    --shadow-xs: 0px 2px 2px rgba(50, 51, 51, 0.2);
    --shadow-sm: 0px 4px 4px rgba(50, 51, 51, 0.2);
    --shadow-md: 0px 8px 8px rgba(50, 51, 51, 0.2);
    --shadow-lg: 0px 16px 16px rgba(50, 51, 51, 0.2);
    --notification-shadow: 0px 8px 24px rgba(24, 84, 74, 0.4);
    --grey-transparent-color: rgba(50, 51, 51, 0.5);
    --grey-transparent-hover-color: rgba(50, 51, 51, 0.75);
    --white-transparent-color: rgba(255, 255, 255, 0.5);
    --white2-transparent-color: rgba(255, 255, 255, 0.25);

    --mobile-port-break: 540px;
    --mobile-land-break: 541px;
    --tablet-break: 768px;
    --desktop-break: 1024px;
}