:root {
    /* Colors */
    --color-primary: #00557f;
    --color-error: #ff5454;
    --color-bedrock: black;
    --color-text: white;

    --inner-background: #00557f;

    /* Typography */
    --typography-accent-font: Swell, sans-serif;
    --typography-font-family: Montserrat, sans-serif;

    --label-text-color: rgba(255, 255, 255, 0.5);
    --input-bg-color: rgba(255, 255, 255, 0.1);
    --input-text-color: #ffffff;
    --placeholder-color: rgba(255, 255, 255, 0.3);

    --color-heading: linear-gradient(79.94deg, #fbb730 27.9%, #ffd174 95.46%);

    --button-primary-border: none;
    --button-secondary-border: none;
    --button-border-radius: 0 var(--space) var(--space) var(--space);
    --color-primary-dark: #014263;
    --color-primary-medium: #1e9cd7;
    --color-primary-button-bg: linear-gradient(79.94deg, #027fac 27.9%, #05d7de 95.46%);
    --color-primary-button-border: linear-gradient(262.04deg, #05cad7 3.98%, #fff5e2 98.92%);
    --color-primary-button-shadow: none;
    --color-primary-button-glow: 1px 1px 4px calc(var(--space) / 8) #67f4ff;
    --color-primary-button-text: #ffffff;
    --decoration-border-radius: 50%;
    --decoration-shadow: inset 0 0 1px rgba(255, 255, 255, 0.5);
    --decoration-bg-color: rgba(255, 255, 255, 0.3);

    --pill-button-color: #faf5f5; /* can this use button color? */

    --color-secondary-button-bg: none;
    --color-secondary-button-border: rgba(255, 255, 255, 0.05);
    --color-secondary-button-shadow: none;
    --color-secondary-button-glow: 1px 1px 4px calc(var(--space) / 8) rgba(255, 253, 249, 0.8);
    --color-secondary-button-text: #ffffff;

    --border-radius-icon-button: var(--space);
    --color-primary-icon-button-bg: linear-gradient(90deg, #027fac, #05d7de);
    --color-primary-icon-button-text: #ffffff;

    --color-secondary-icon-button-bg: rgba(255, 255, 255, 0.05);
    --color-secondary-icon-button-text: #ffffff;
    --color-secondary-icon-button-shadow: inset 1px 1px 4px rgba(255, 255, 255, 0.5);

    --color-tertiary-icon-button-bg: #2b81ac;
    --color-tertiary-icon-button-text: #ffffff;
    --button-shadow: drop-shadow(0px 4px 4px #00000040);

    --decoration-object-1-width: calc(0.546 * var(--short-side));
    --decoration-object-1-landscape-position-x: calc(-0.15 * var(--decoration-object-1-width));
    --decoration-object-1-landscape-position-y: calc(-0.15 * var(--decoration-object-1-width));
    --decoration-object-1-portrait-position-x: calc(-1.1 * var(--decoration-object-1-width));
    --decoration-object-1-portrait-position-y: calc(-1.1 * var(--decoration-object-1-width));
    --decoration-object-1-transform: rotate(140deg);

    --decoration-object-2-landscape-width: calc(0.546 * var(--short-side));
    --decoration-object-2-portrait-width: calc(0.943 * var(--short-side));
    --decoration-object-2-landscape-position-x: calc(
        var(--long-side) -
        (0.85 * var(--decoration-object-2-landscape-width))
    );
    --decoration-object-2-landscape-position-y: calc(
        var(--short-side) -
        (0.7 * var(--decoration-object-2-landscape-width))
    );
    --decoration-object-2-portrait-position-x: calc(
        0.5 *
        var(--short-side) -
        0.5 *
        var(--decoration-object-2-portrait-width)
    );
    --decoration-object-2-portrait-position-y: calc(var(--long-side) - 0.6 * var(--decoration-object-2-portrait-width));

    --decoration-object-2-middle-width: 10px;
    --decoration-object-2-middle-position-x: -20px;
    --decoration-object-2-middle-position-y: -20px;
    --decoration-object-2-transform: rotate(-30deg);

    --display-background-main-layout: block;
    --display-decoration-main-layout: none;

    --avatar-border-gradient: linear-gradient(to right, #027fac, #027fac 28%, #a9e0f4 66%, #027fac);
    --avatar-shadow: 0 0 0 #7adbff, 0 1px 2px #7adbff;
    --header-border-gradient: linear-gradient(90deg, #002245, #04bfd0, #002245);
    --progress-bar-inner-gradient: linear-gradient(to right, #027fac, #05d7de);
    --progress-bar-border-gradient: linear-gradient(to right, rgba(205, 226, 255, 0), rgba(182, 237, 255, 1));
    --logo-max-width: clamp(112px, 20vw, 240px);

    --footer-menu-active-item-decoration-color: #05d7de;
    --footer-menu-active-item-glow-color: #48cfff;

    --decoration-visibility: visible;
    --main-background-visibility: visible;

    --heading-gradient: linear-gradient(79.94deg, #fbb730 27.9%, #ffd174 95.46%);
    --modal-bg: rgba(255, 255, 255, 0.05);
    --modal-backdrop-bg: rgba(1, 66, 99, 0.8);
    --modal-radius: calc(var(--space) * 2);

    --account-page-menu-item-background-color: #2b81ac;

    --system-modal-message-border-color: rgba(255, 255, 255, 0.05);
    --system-modal-message-error-title-color: linear-gradient(79.94deg, #ff4f1e 27.9%, #ffb187 95.46%);

    --card-background: #1f6a90;
    --card-glow-color: var(--color-primary-medium);
    --card-label-text-color: rgba(255, 255, 255, 0.8);
    --card-label-background: rgba(255, 255, 255, 0.1);

    --mission-current-value-text-color: rgba(255, 255, 255, 0.5);
    --mission-target-value-text-color: var(--heading-gradient);
    --mission-target-value-background: linear-gradient(
        79.94deg,
        rgba(251, 183, 48, 0.3) 27.9%,
        rgba(255, 209, 116, 0.3) 95.46%
    );
    --accent-color: #fbb730;
    --leaderboard-podium-top-background: #2588bb;
    --leaderboard-podium-gradient: linear-gradient(180deg, #409ccc 0%, rgba(37, 136, 187, 0) 100%);
    --leaderboard-badge-color: #7d3e8f;
    --leaderboard-item-bg: #2588bb;
    --hot--package-bg: #c2457f;
    --popular--package-bg: #63c61d;

    --history-table-text-color: rgba(255, 255, 255, 0.85);

    --level-up-text-shadow: 1px 1px #ffe042, -1px -1px #444;
    --level-up-text-color: #d85a02;

    --main-background: var(--color-primary);
}

button[data-type^="button-"] {
    > div:before {
        content: "";
        position: absolute;
        inset: calc(var(--space) / 8);
        border-radius: calc(var(--space) / 1.25);
        border-top-left-radius: 0;
        overflow: hidden;
        background-image: var(--color-bg);
    }

    div[data-type^="button-decoration"] {
        position: absolute;
        --step: calc(var(--decoration) + var(--border));

        span {
            position: absolute;
            width: var(--decoration);
            height: var(--decoration);
            border-radius: var(--decoration-border-radius);
            box-shadow: var(--decoration-shadow);
            background: var(--decoration-bg-color);
        }
    }

    div[data-type="button-decoration-left"] {
        left: calc(0.8 * var(--space));
        bottom: calc(0.5 * var(--space));

        span {
            &:nth-child(1) {
                left: 0;
                bottom: calc(var(--step) * 1);
            }

            &:nth-child(2) {
                left: 0;
                bottom: 0;
            }

            &:nth-child(3) {
                left: calc(var(--step) * 1);
                bottom: 0;
            }

            &:nth-child(4) {
                left: calc(var(--step) * 2);
                bottom: 0;
            }
        }
    }

    div[data-type="button-decoration-right"] {
        top: calc(0.5 * var(--space));
        right: calc(0.5 * var(--space));

        span {
            &:nth-child(1) {
                top: 0;
                right: 0;
            }
            &:nth-child(2) {
                top: calc(var(--step) * 1);
                right: 0;
            }
            &:nth-child(3) {
                top: calc(var(--step) * 1);
                right: calc(var(--step) * 1);
            }
            &:nth-child(4) {
                top: calc(var(--step) * 2);
                right: calc(var(--step) * 1);
            }
        }
    }
}

div[data-type="button-glow"] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: var(--glow) inset;
    z-index: 2;
    border-radius: var(--space);
    pointer-events: none;

    &:before {
        content: "";
        position: absolute;
        height: 0;
        width: calc(var(--space) * 5);
        top: 0;
        left: calc(var(--space) * -0.6);
        transform: rotate(-45deg);
        transform-origin: center center;
        box-shadow: var(--glow);
    }
}

button[data-type="button-primary"] {
    > div {
        mask-image: url(./button-mask.png), linear-gradient(to right, black, black);
        mask-size:
            auto 100%,
            100% 100%;
        mask-position:
            left bottom,
            right bottom;
        mask-repeat: no-repeat, no-repeat;
        mask-composite: exclude;
        mask-origin: content-box;
    }
}

button[data-type="button-secondary"] {
    > div {
        mask: none;

        border-radius: var(--space);

        &:before {
            content: none;
        }
    }
    div[data-type="button-glow"] {
        &:before {
            content: none;
        }
    }
}