:root {
    /* Hyperion Colors */
    --slate-900: #02233c;
    --slate-800: #063f69;
    --slate-700: #35618d;
    --slate-600: #4d79a0;
    --slate-500: #6591b5;
    --slate-400: #83b0cf;
    --slate-300: #acd4e7;
    --slate-200: #cee6f2;
    --slate-100: #e1eef4;
    --slate-000: #f5fbfc;

    --indigo-900: #323277;
    --indigo-800: #2d4d9a;
    --indigo-700: #306ccf;
    --indigo-600: #3e92f7;
    --indigo-500: #69a6ff;
    --indigo-400: #97c1ff;
    --indigo-300: #b8d5ff;
    --indigo-200: #d4e8ff;
    --indigo-100: #ebf6ff;
    --indigo-000: #f8fbff;

    --violet-900: #5e1977;
    --violet-800: #8b28a3;
    --violet-700: #a53abf;
    --violet-600: #c542d3;
    --violet-500: #d568e0;
    --violet-400: #ea97ef;
    --violet-300: #f4b8ff;
    --violet-200: #f8d9ff;
    --violet-100: #fbebff;
    --violet-000: #fdf9ff;

    --cool-grey-900: #2c353d;
    --cool-grey-800: #445763;
    --cool-grey-700: #607682;
    --cool-grey-600: #798e99;
    --cool-grey-500: #8fa1aa;
    --cool-grey-400: #acbac1;
    --cool-grey-300: #c1cfd1;
    --cool-grey-200: #d3dee2;
    --cool-grey-100: #e6edef;
    --cool-grey-000: #f7fbfc;

    --blue-900: #083c5d;
    --blue-800: #006096;
    --blue-700: #0079bc;
    --blue-600: #0b9bdb;
    --blue-500: #60b4e2;
    --blue-400: #97ceec;
    --blue-300: #b7e4f7;
    --blue-200: #d2f1ff;
    --blue-100: #e6f9ff;
    --blue-000: #f3fdff;

    /* Non-Hyperion Colors */
    --dark-background: #111133;
    --dark-inner-background: #202051;
    --default-text-color: white;

    /* reusable variables */
    --drop-shadow-blue: rgba(8, 60, 93, 0.6); /* Merrywhether 900 */
    --drop-shadow-indigo: rgba(50, 50, 119, 0.2); /* Indigo 900 */
    --blue-gradient-to-lighter: linear-gradient(
        135deg,
        var(--indigo-900) 0%,
        var(--indigo-600) 100%
    );

    --blue-gradient-to-darker: linear-gradient(
        135deg,
        var(--indigo-600) 0%,
        var(--indigo-900) 100%
    );

    --indigo-gradient-1000-900: linear-gradient(
        180deg,
        #202051 0%,
        var(--indigo-900) 100%
    );

    --indigo-gradient-1000-1100: linear-gradient(
        180deg,
        #202051 0%,
        #111133 100%
    );

    --gradient-purple: linear-gradient(135deg, #4e157b 0%, #1c1c58 100%);

    --gradient-triangle-color: rgba(139, 40, 163, 0.2);
    --gradient-triangle-angle: 60deg;
    --gradient-triangle-inverted-angle: 120deg;
    --gradient-triangle-end: 37%;

    --gradient-triangle: linear-gradient(
        var(--gradient-triangle-angle),
        var(--gradient-triangle-color) 0%,
        var(--gradient-triangle-color) var(--gradient-triangle-end),
        transparent 0%
    );
    --gradient-triangle-alt: linear-gradient(
        var(--gradient-triangle-inverted-angle),
        var(--gradient-triangle-color) 0%,
        var(--gradient-triangle-color) var(--gradient-triangle-end),
        transparent 0%
    );

    --tooltip-background: var(--gradient-purple);
    --tooltip-text-shadow: 0 1px 0 var(--drop-shadow-indigo);
    --tooltip-border-color: rgba(78, 21, 123, 0.8); /* #4e157b */
}