/* ==========================================================
   ITOS Core Styles
   Version: 1.0.0
   ========================================================== */

/* ==========================================================
   IMPORTS
   ========================================================== */

@import url('variables.css');

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

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

    margin:0;

    padding:0;

    box-sizing:border-box;

}

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-family);

    font-size:var(--font-body);

    color:var(--text);

    background:var(--background);

    line-height:1.6;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

/* ==========================================================
   LINKS
   ========================================================== */

a{

    text-decoration:none;

    color:inherit;

    transition:var(--transition-fast);

}

/* ==========================================================
   IMAGES
   ========================================================== */

img{

    max-width:100%;

    display:block;

}

/* ==========================================================
   LISTS
   ========================================================== */

ul,
ol{

    list-style:none;

}

/* ==========================================================
   BUTTONS
   ========================================================== */

button{

    font-family:inherit;

    cursor:pointer;

    border:none;

    background:none;

}

/* ==========================================================
   INPUTS
   ========================================================== */

input,
textarea,
select{

    font-family:inherit;

    outline:none;

}

/* ==========================================================
   CONTAINER
   ========================================================== */

.container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:0 var(--space-6);

}

/* ==========================================================
   SECTION
   ========================================================== */

.section{

    padding:var(--space-8) 0;

}

/* ==========================================================
   FLEX UTILITIES
   ========================================================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

/* ==========================================================
   GRID
   ========================================================== */

.grid{

    display:grid;

    gap:var(--space-6);

}

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

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

/* ==========================================================
   WIDTH
   ========================================================== */

.w-100{

    width:100%;

}

/* ==========================================================
   HEIGHT
   ========================================================== */

.h-100{

    height:100%;

}

.min-vh{

    min-height:100vh;

}

/* ==========================================================
   MARGIN
   ========================================================== */

.mt-1{margin-top:var(--space-1);}
.mt-2{margin-top:var(--space-2);}
.mt-3{margin-top:var(--space-3);}
.mt-4{margin-top:var(--space-4);}
.mt-5{margin-top:var(--space-5);}
.mt-6{margin-top:var(--space-6);}
.mt-7{margin-top:var(--space-7);}
.mt-8{margin-top:var(--space-8);}

.mb-1{margin-bottom:var(--space-1);}
.mb-2{margin-bottom:var(--space-2);}
.mb-3{margin-bottom:var(--space-3);}
.mb-4{margin-bottom:var(--space-4);}
.mb-5{margin-bottom:var(--space-5);}
.mb-6{margin-bottom:var(--space-6);}
.mb-7{margin-bottom:var(--space-7);}
.mb-8{margin-bottom:var(--space-8);}

/* ==========================================================
   PADDING
   ========================================================== */

.p-1{padding:var(--space-1);}
.p-2{padding:var(--space-2);}
.p-3{padding:var(--space-3);}
.p-4{padding:var(--space-4);}
.p-5{padding:var(--space-5);}
.p-6{padding:var(--space-6);}

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

@media(max-width:992px){

    .container{

        padding:0 var(--space-5);

    }

}

@media(max-width:768px){

    .container{

        padding:0 var(--space-4);

    }

}

/* ==========================================================
   PANELS
   ========================================================== */

.itos-panel{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

    padding:var(--space-6);

}