/*==============================================================================
    ATHENA UI FRAMEWORK
    File        : ui-base.css
    Description : Global Variables, Reset & Base Styles
    Version     : 1.0
==============================================================================*/


/*==============================================================================
    GOOGLE FONT
==============================================================================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


/*==============================================================================
    ROOT VARIABLES
==============================================================================*/

:root{

    /* Colors */
    --ui-primary: #2A1458;
    --ui-secondary: #4C64FF;
    --ui-accent: #E11AA7;

    --ui-dark: #111111;
    --ui-heading: #1B1B1B;
    --ui-text: #666666;
    --ui-light-text: #8F8F8F;

    --ui-white: #FFFFFF;
    --ui-light: #FAFAFB;
    --ui-border: #ECECEC;

    /* Border Radius */
    --ui-radius-xs: 8px;
    --ui-radius-sm: 14px;
    --ui-radius-md: 20px;
    --ui-radius-lg: 28px;
    --ui-radius-xl: 40px;

    /* Shadows */
    /* --ui-shadow-sm: 0 8px 20px rgba(0,0,0,.04);
    --ui-shadow-md: 0 18px 45px rgba(0,0,0,.08);
    --ui-shadow-lg: 0 30px 80px rgba(0,0,0,.10); */

    --ui-shadow-sm: 0 18px 45px rgba(0,0,0,.08);
    --ui-shadow-md: 0 30px 80px rgba(0,0,0,.10);
    --ui-shadow-lg: 0 45px 120px rgba(0,0,0,.15);

    /* Transition */
    --ui-transition: all .35s ease;

    
    /* ----- ADDITIONAL COLOR PALETTE ----- */

    /* Primary Brand */
    --theme-color:#ef00a1;
    --theme-color-rgb: 225, 26, 167;

    --theme-primary:#ef00a1;
    --theme-primary-dark:#bd007e;
    --theme-primary-light:#FCE7F3;

    /* Secondary */
    --theme-secondary:#1F2937;

    /* Text */
    --theme-heading:#111827;
    --theme-text:#6B7280;

    /* Background */
    --theme-white:#FFFFFF;
    --theme-light:#F8F9FA;
    --theme-border:#E5E7EB;

}



/*==============================================================================
    RESET
==============================================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    font-size:17px;
    line-height:1.8;

    color:var(--ui-text);
    background:var(--ui-white);

    overflow-x:hidden;

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

img{
    max-width:100%;
    height:auto;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
    transition:var(--ui-transition);
}

a:hover{
    text-decoration:none;
}

ul,
ol{
    margin:0;
    padding:0;
}

li{
    list-style:none;
}

button,
input,
select,
textarea{

    font-family:inherit;

    outline:none;
    border:none;
}

button{
    background:none;
    cursor:pointer;
}

::selection{
    background:var(--ui-accent);
    color:#fff;
}


/*==============================================================================
    TYPOGRAPHY
==============================================================================*/

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--ui-heading);
    
    font-weight:600;
    line-height:1.15;

    margin-bottom:20px;
}

h1{
    font-size:72px;
}

h2{
    font-size:54px;
}

h3{
    font-size:40px;
}

h4{
    font-size:30px;
}

h5{
    font-size:24px;
}

h6{
    font-size:20px;
}

p{
    margin-bottom:24px;
}

strong{
    font-weight:700;
    color:var(--ui-heading);
}


/*==============================================================================
    IMAGE HELPERS
==============================================================================*/

.ui-img{
    overflow:hidden;
    border-radius:var(--ui-radius-lg);
}

.ui-img img{
    width:100%;
    transition:.8s ease;
}

.ui-img:hover img{
    transform:scale(1.06);
}


/*==============================================================================
    BACKGROUND HELPERS
==============================================================================*/

.ui-bg-light{
    background:var(--ui-light);
}

.ui-bg-dark{
    background:var(--ui-dark);
}

.ui-bg-primary{
    background:var(--ui-primary);
}

.ui-bg-accent{
    background:var(--ui-accent);
}


/*==============================================================================
    TEXT HELPERS
==============================================================================*/

.ui-text-center{
    text-align:center;
}

.ui-text-left{
    text-align:left;
}

.ui-text-right{
    text-align:right;
}

.ui-text-white{
    color:#fff !important;
}

.ui-text-primary{
    color:var(--ui-primary);
}

.ui-text-accent{
    color:var(--ui-accent);
}

.ui-text-muted{
    color:var(--ui-light-text);
}


/*==============================================================================
    BORDER RADIUS HELPERS
==============================================================================*/

.ui-radius-sm{
    border-radius:var(--ui-radius-sm);
}

.ui-radius-md{
    border-radius:var(--ui-radius-md);
}

.ui-radius-lg{
    border-radius:var(--ui-radius-lg);
}


/*==============================================================================
    SHADOW HELPERS
==============================================================================*/

.ui-shadow-sm{
    box-shadow:var(--ui-shadow-sm);
}

.ui-shadow-md{
    box-shadow:var(--ui-shadow-md);
}

.ui-shadow-lg{
    box-shadow:var(--ui-shadow-lg);
}


/*==============================================================================
    TRANSITION
==============================================================================*/

.ui-transition{
    transition:var(--ui-transition);
}


/*==============================================================================
    RESPONSIVE
==============================================================================*/

@media (max-width:991.98px){

    body{
        font-size:16px;
        line-height:1.7;
    }

    h1{
        font-size:42px;
    }

    h2{
        font-size:34px;
    }

    h3{
        font-size:28px;
    }

    h4{
        font-size:24px;
    }

    h5{
        font-size:21px;
    }

    h6{
        font-size:18px;
    }

}