/* =========================================================
   GLOBAL FOUNDATION
   ========================================================= */

:root {

    --background:
        #07101d;

    --surface:
        rgba(
            15,
            29,
            48,
            0.82
        );

    --surface-border:
        rgba(
            255,
            255,
            255,
            0.08
        );

    --text-primary:
        #f5f8ff;

    --text-secondary:
        #9eacc0;

    --accent:
        #62a6ff;

    --success:
        #4fe3a4;

    --danger:
        #ff6b78;

    --input-background:
        rgba(
            255,
            255,
            255,
            0.045
        );

}


*,
*::before,
*::after {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


html {

    min-width:
        320px;

    min-height:
        100%;

}


body {

    min-width:
        320px;

    min-height:
        100vh;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color:
        var(--text-primary);

    background:

        radial-gradient(
            circle at 25% 0%,
            rgba(
                44,
                110,
                202,
                0.24
            ),
            transparent 36%
        ),

        radial-gradient(
            circle at 90% 90%,
            rgba(
                72,
                55,
                170,
                0.13
            ),
            transparent 36%
        ),

        var(--background);

}


button,
input {

    font:
        inherit;

}


button {

    cursor:
        pointer;

}


button:disabled {

    cursor:
        wait;

    opacity:
        0.65;

}


.is-hidden {

    display:
        none !important;

}


.screen {

    display:
        grid;

    min-height:
        100vh;

    place-items:
        center;

    padding:
        24px;

}


.eyebrow {

    margin-bottom:
        7px;

    color:
        var(--accent);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;

}


.system-mark {

    display:
        grid;

    width:
        48px;

    height:
        48px;

    flex-shrink:
        0;

    place-items:
        center;

    border:
        1px solid
        rgba(
            98,
            166,
            255,
            0.25
        );

    border-radius:
        14px;

    color:
        #cfe3ff;

    background:
        rgba(
            98,
            166,
            255,
            0.12
        );

    font-size:
        20px;

    font-weight:
        700;

}


.primary-button,
.secondary-button {

    border:
        0;

    border-radius:
        12px;

    transition:
        160ms ease;

}


.primary-button {

    min-height:
        46px;

    padding:
        0 20px;

    color:
        #06101d;

    background:
        #72b2ff;

    font-weight:
        700;

}


.primary-button:hover:not(:disabled) {

    transform:
        translateY(-1px);

    background:
        #89beff;

}


.secondary-button {

    min-height:
        40px;

    padding:
        0 18px;

    color:
        #dce8f8;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    background:
        rgba(
            255,
            255,
            255,
            0.04
        );

}


.secondary-button:hover:not(:disabled) {

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

}


@media (
    max-width: 600px
) {

    .screen {

        padding:
            16px;

    }

}