/*
======================================================================

CTM PATH™ Guided Journey v6.0

File
css/foundation/global.css

Purpose
Global Design Foundation

Responsibility
• Premium colour system
• Design tokens
• Layout foundation
• Reset styles
• Base application behaviour
• CTM PATH™ visual identity

======================================================================
*/


/*==================================================
Root Variables
==================================================*/

:root{


    /*
    -----------------------------------------------
    Brand Colours
    -----------------------------------------------
    */


    --color-background:

        #020812;



    --color-background-soft:

        #06152F;



    --color-background-deep:

        #020B18;



    --color-background-light:

        #09294A;



    --color-surface:

        rgba(255,255,255,.06);



    --color-surface-light:

        rgba(255,255,255,.10);




    /*
    -----------------------------------------------
    Primary Brand
    -----------------------------------------------
    */


    --color-primary:

        #18A66D;



    --color-primary-bright:

        #00C2B8;



    --color-primary-dark:

        #125D41;




    /*
    -----------------------------------------------
    CTM Gold
    -----------------------------------------------
    */


    --color-gold:

        #D9B56A;



    --color-gold-light:

        #FFF0A3;



    --color-gold-dark:

        #B47718;



    --color-gold-soft:

        rgba(217,181,106,.45);





    /*
    -----------------------------------------------
    Typography Colours
    -----------------------------------------------
    */


    --color-white:

        #FFFFFF;



    --color-ivory:

        #F5F4EE;



    --color-text:

        rgba(255,255,255,.94);



    --color-text-soft:

        rgba(255,255,255,.72);





    /*
    -----------------------------------------------
    Functional Colours
    -----------------------------------------------
    */


    --color-success:

        #22C55E;



    --color-warning:

        #F59E0B;



    --color-danger:

        #EF4444;





    /*
    -----------------------------------------------
    Shadows
    -----------------------------------------------
    */


    --shadow-soft:


        0 20px 60px rgba(0,0,0,.35);




    --shadow-premium:


        0 30px 80px rgba(0,0,0,.60);




    --shadow-glow:


        0 0 50px rgba(0,194,184,.18);




    --shadow-gold:


        0 0 45px rgba(217,181,106,.30);





    /*
    -----------------------------------------------
    Radius
    -----------------------------------------------
    */


    --radius-card:

        28px;




    --radius-button:

        999px;




    --radius-soft:

        16px;





    /*
    -----------------------------------------------
    Spacing
    -----------------------------------------------
    */


    --space-xs:

        8px;



    --space-sm:

        16px;



    --space-md:

        32px;



    --space-lg:

        64px;



    --space-xl:

        96px;





    /*
    -----------------------------------------------
    Animation
    -----------------------------------------------
    */


    --speed-fast:

        .25s;



    --speed-normal:

        .45s;



    --speed-slow:

        .90s;



    --ease-premium:

        cubic-bezier(.22,1,.36,1);



}

/*==================================================
Global Reset
==================================================*/


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


    margin:0;


    padding:0;


    box-sizing:border-box;


}





/*==================================================
HTML Base
==================================================*/


html{


    width:100%;


    min-height:100%;


    scroll-behavior:smooth;


}







/*==================================================
Body Foundation

CTM PATH™ Premium Brand Atmosphere

Aligned with:
Infinity Mastery Logo
Midnight Navy Identity
Gold Transformation Light

==================================================*/


body{


    width:100%;


    min-height:100vh;



    overflow-x:hidden;



    background:



        /*
        -------------------------------------------
        Transformation Light Glow
        Gold centre illumination
        -------------------------------------------
        */


        radial-gradient(

            circle at 50% 18%,

            rgba(217,181,106,.10),

            transparent 28%

        ),




        /*
        -------------------------------------------
        CTM Teal Energy Layer
        -------------------------------------------
        */


        radial-gradient(

            circle at 50% 35%,

            rgba(0,194,184,.08),

            transparent 38%

        ),





        /*
        -------------------------------------------
        Executive Midnight Foundation
        -------------------------------------------
        */


        linear-gradient(

            180deg,

            #020812 0%,


            #06152F 48%,


            #020B18 100%

        );





    color:


        var(--color-text);





    -webkit-font-smoothing:


        antialiased;




    -moz-osx-font-smoothing:


        grayscale;



}








/*==================================================
Premium Background Glow

CTM PATH™ Atmospheric Identity

==================================================*/


body::before{


    content:"";


    position:fixed;


    inset:0;





    background:




        radial-gradient(

            circle at center,

            rgba(0,194,184,.06),

            transparent 45%

        );





    pointer-events:none;



    z-index:-1;



}








/*==================================================
Application Root
==================================================*/


#app{


    width:100%;


    min-height:100vh;


    position:relative;



}








/*==================================================
Screen Container
==================================================*/


#screen-container{


    width:100%;


    min-height:100vh;



}








/*==================================================
Screen Base
==================================================*/


.screen{


    width:100%;


    min-height:100vh;





    display:flex;



    justify-content:center;



    align-items:center;





    position:relative;



}








/==================================================
Container
==================================================/


.container{


    width:100%;


    max-width:1200px;




    margin:0 auto;





    padding-left:


        40px;





    padding-right:


        40px;



}

/*==================================================
Images
==================================================*/


img{


    max-width:100%;


    height:auto;


    display:block;



}








/*==================================================
Logo Image Foundation

CTM PATH™ Transparent SVG Support

==================================================*/


.logo{


    display:block;


    width:auto;


    height:auto;



    background:transparent;



}






.logo img{


    width:100%;


    height:auto;



    object-fit:contain;



}








/*==================================================
Buttons Remove Default
==================================================*/


button{


    font:inherit;



    border:none;



    background:none;



    cursor:pointer;



}








/*==================================================
Links
==================================================*/


a{


    color:inherit;



    text-decoration:none;



}








/*==================================================
Selection
==================================================*/


::selection{


    background:

        rgba(

            217,

            181,

            106,

            .35

        );



    color:


        #FFFFFF;



}








/*==================================================
Scrollbar Premium

CTM PATH™ Gold + Teal Identity

==================================================*/


::-webkit-scrollbar{


    width:


        10px;



}





::-webkit-scrollbar-track{


    background:


        #020B18;



}





::-webkit-scrollbar-thumb{


    background:



        linear-gradient(



            180deg,



            #D9B56A,



            #00C2B8



        );



    border-radius:


        20px;



}





::-webkit-scrollbar-thumb:hover{


    background:



        linear-gradient(



            180deg,



            #FFF0A3,



            #18A66D



        );



}








/*==================================================
Accessibility

==================================================*/


:focus-visible{


    outline:



        3px solid rgba(


            217,


            181,


            106,


            .65


        );




    outline-offset:


        4px;



}








/*==================================================
Premium Utility Classes

CTM PATH™ Identity Helpers

==================================================*/


.text-gold{


    color:


        var(--color-gold);



}





.text-primary{


    color:


        var(--color-primary-bright);



}





.text-ivory{


    color:


        var(--color-ivory);



}





.glow-gold{


    filter:


        drop-shadow(

            0 0 25px rgba(

                217,

                181,

                106,

                .35

            )

        );



}





.glow-teal{


    filter:


        drop-shadow(

            0 0 30px rgba(

                0,

                194,

                184,

                .25

            )

        );



}