/* =========================================================
   VAERO ENGINE — CORE
   GLOBAL TOKENS / RESET / FOUNDATION
   FINAL CONSOLIDATED EDITION
========================================================= */


/* =========================================================
   01. CORE TOKENS
========================================================= */

:root{
    color-scheme:dark;

    /* -----------------------------------------------------
       BASE
    ----------------------------------------------------- */

    --bg:#06101b;
    --bg-deep:#030a12;

    --surface:#0f1926;
    --surface-2:#162434;
    --surface-3:#1d2d40;


    /* -----------------------------------------------------
       BRAND
    ----------------------------------------------------- */

    --gold:#e6d7b0;
    --gold-soft:#f2e2bb;

    --blue:#72b7f2;
    --green:#6ee7a8;

    --warning:#d6a84c;
    --danger:#d46f72;


    /* -----------------------------------------------------
       TEXT
    ----------------------------------------------------- */

    --text:#f5f1e9;

    --muted:
        rgba(
            245,
            241,
            233,
            .64
        );

    --muted-soft:
        rgba(
            245,
            241,
            233,
            .42
        );

    --muted-faint:
        rgba(
            245,
            241,
            233,
            .26
        );


    /* -----------------------------------------------------
       BORDER
    ----------------------------------------------------- */

    --border-soft:
        rgba(
            255,
            255,
            255,
            .065
        );

    --border-strong:
        rgba(
            255,
            255,
            255,
            .13
        );


    /* -----------------------------------------------------
       RADIUS
    ----------------------------------------------------- */

    --radius-xs:10px;
    --radius-sm:13px;
    --radius-md:18px;
    --radius-lg:24px;
    --radius-xl:30px;


    /* -----------------------------------------------------
       SHADOW
    ----------------------------------------------------- */

    --shadow:
        0
        18px
        48px
        rgba(
            0,
            0,
            0,
            .3
        );

    --shadow-soft:
        0
        12px
        34px
        rgba(
            0,
            0,
            0,
            .2
        );

    --shadow-deep:
        0
        28px
        80px
        rgba(
            0,
            0,
            0,
            .42
        );


    /* -----------------------------------------------------
       TRANSITION
    ----------------------------------------------------- */

    --transition:
        .22s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );

    --transition-fast:
        .16s
        cubic-bezier(
            .2,
            .8,
            .2,
            1
        );


    /* -----------------------------------------------------
       SAFE AREA
    ----------------------------------------------------- */

    --safe-top:
        env(
            safe-area-inset-top,
            0px
        );

    --safe-right:
        env(
            safe-area-inset-right,
            0px
        );

    --safe-bottom:
        env(
            safe-area-inset-bottom,
            0px
        );

    --safe-left:
        env(
            safe-area-inset-left,
            0px
        );
}


/* =========================================================
   02. GLOBAL RESET
========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}


/* =========================================================
   03. DOCUMENT ROOT
========================================================= */

html{
    width:100%;
    height:100%;

    margin:0;
    padding:0;

    background:
        var(--bg-deep);

    overflow:hidden;

    overscroll-behavior:none;

    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;

    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================================
   04. BODY
========================================================= */

body{
    width:100%;
    height:100%;

    min-width:0;
    min-height:0;

    margin:0;
    padding:0;

    overflow:hidden;

    overscroll-behavior:none;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(63,124,175,.025),
            transparent 34%
        ),
        var(--bg);

    color:
        var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:14px;
    font-weight:400;

    line-height:1.4;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


/* =========================================================
   05. TEXT
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p{
    margin:0;
}

h1,
h2,
h3,
h4,
h5,
h6{
    color:
        var(--text);

    font-family:inherit;
}

p{
    color:
        var(--muted);
}


/* =========================================================
   06. TEXT SAFETY
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
strong,
small,
label{
    overflow-wrap:break-word;
}


/* =========================================================
   07. INTERACTIVE ELEMENTS
========================================================= */

button,
input,
textarea,
select{
    font:inherit;
}

button{
    margin:0;

    border:0;

    color:inherit;

    -webkit-tap-highlight-color:
        transparent;
}

button:not(:disabled){
    cursor:pointer;
}

button:disabled{
    cursor:not-allowed;

    opacity:.46;
}

input,
textarea,
select{
    min-width:0;

    color:
        var(--text);
}

input::placeholder,
textarea::placeholder{
    color:
        var(--muted-soft);
}

textarea{
    font-family:inherit;
}

select{
    color-scheme:dark;
}


/* =========================================================
   08. REMOVE NATIVE MOBILE APPEARANCE
========================================================= */

button,
input,
textarea,
select{
    -webkit-appearance:none;
    appearance:none;
}


/* =========================================================
   09. LINKS
========================================================= */

a{
    color:inherit;

    text-decoration:none;

    -webkit-tap-highlight-color:
        transparent;
}


/* =========================================================
   10. MEDIA
========================================================= */

img,
svg,
video,
canvas,
picture{
    display:block;

    max-width:100%;
}

img,
video{
    height:auto;
}


/* =========================================================
   11. SVG
========================================================= */

svg{
    flex:
        0
        0
        auto;
}


/* =========================================================
   12. TABLE
========================================================= */

table{
    border-collapse:collapse;
    border-spacing:0;
}


/* =========================================================
   13. FORM SAFETY
========================================================= */

input,
textarea,
button,
select{
    max-width:100%;
}

input,
textarea{
    caret-color:
        var(--gold-soft);
}


/* =========================================================
   14. ACCESSIBILITY
========================================================= */

:focus{
    outline:none;
}

:focus-visible{
    outline:
        2px solid
        rgba(
            232,
            201,
            135,
            .72
        );

    outline-offset:2px;
}


/* =========================================================
   15. EYEBROW
========================================================= */

.eyebrow{
    margin-bottom:10px;

    color:
        var(--gold);

    font-size:8px;
    font-weight:750;

    line-height:1;

    letter-spacing:.17em;

    text-transform:uppercase;
}


/* =========================================================
   16. SELECTION
========================================================= */

::selection{
    background:
        rgba(
            230,
            199,
            141,
            .22
        );

    color:#fff;
}


/* =========================================================
   17. SCROLLBAR FOUNDATION
========================================================= */

*{
    scrollbar-color:
        rgba(
            255,
            255,
            255,
            .11
        )
        transparent;
}

*::-webkit-scrollbar{
    width:5px;
    height:5px;
}

*::-webkit-scrollbar-track{
    background:transparent;
}

*::-webkit-scrollbar-thumb{
    border-radius:999px;

    background:
        rgba(
            255,
            255,
            255,
            .1
        );
}


/* =========================================================
   18. HIDDEN ATTRIBUTE
========================================================= */

[hidden]{
    display:none !important;
}


/* =========================================================
   19. DISABLED INTERACTION SAFETY
========================================================= */

button:disabled,
input:disabled,
textarea:disabled,
select:disabled{
    pointer-events:none;
}


/* =========================================================
   20. TOUCH TARGET BEHAVIOUR
========================================================= */

button,
a,
input,
textarea,
select{
    touch-action:manipulation;
}


/* =========================================================
   21. DESKTOP
========================================================= */

@media (min-width:1000px){

    body{
        font-size:13px;
    }

}


/* =========================================================
   22. MOBILE
========================================================= */

@media (max-width:600px){

    body{
        font-size:12px;
    }

    input,
    textarea,
    select{
        /*
           Prevent iOS Safari automatic zoom
           when focusing form fields.
        */
        font-size:16px;
    }

    .eyebrow{
        margin-bottom:7px;

        font-size:7px;
    }

}


/* =========================================================
   23. SMALL PHONE
========================================================= */

@media (max-width:390px){

    body{
        font-size:11px;
    }

}


/* =========================================================
   24. TOUCH DEVICES
========================================================= */

@media (hover:none){

    button,
    a{
        -webkit-user-select:none;
        user-select:none;
    }

}


/* =========================================================
   25. HIGH CONTRAST
========================================================= */

@media (prefers-contrast:more){

    :root{
        --border-soft:
            rgba(
                255,
                255,
                255,
                .12
            );

        --border-strong:
            rgba(
                255,
                255,
                255,
                .2
            );

        --muted:
            rgba(
                245,
                241,
                233,
                .76
            );
    }

}


/* =========================================================
   26. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    *,
    *::before,
    *::after{
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

}


/* =========================================================
   27. IOS VIEWPORT FOUNDATION
========================================================= */

@supports (-webkit-touch-callout:none){

    html,
    body{
        min-height:
            -webkit-fill-available;
    }

}


/* =========================================================
   28. DYNAMIC VIEWPORT FOUNDATION
========================================================= */

@supports (height:100dvh){

    html,
    body{
        height:100dvh;
    }

}


/* =========================================================
   29. FINAL GLOBAL SAFETY
========================================================= */

html,
body{
    max-width:100%;

    overscroll-behavior:none;
}

body{
    isolation:isolate;
}


/* =========================================================
   END — VAERO ENGINE CORE
========================================================= */