/* ==========================================================================
   BASE.CSS
   Globale Basisstyles für CrewHub
   ========================================================================== */


/* ==========================================================================
   HTML & BODY
   ========================================================================== */

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;

    background:var(--bg-main);

    color:var(--text-main);

    font-family:Inter,Segoe UI,Roboto,sans-serif;

    line-height:1.5;

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



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

h1,
h2,
h3,
h4,
h5,
h6{
    margin:0;
    color:var(--text-main);
    font-weight:700;
    line-height:1.2;
}

h1{
    font-size:22pt;
}

h2{
    font-size:18pt;
}

h3{
    font-size:14pt;
}

h4{
    font-size:12pt;
}

h5{
    font-size:11pt;
}

h6{
    font-size:10pt;
}


p{
    margin:0;
    color:var(--text-muted);
}



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

a{
    color:var(--primary);
    text-decoration:none;
    transition:opacity .2s ease;
}

a:hover{
    opacity:.8;
}



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

ul,
ol{
    margin:0;
    padding-left:20px;
}

li{
    margin-bottom:6px;
}



/* ==========================================================================
   MEDIA
   ========================================================================== */

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



/* ==========================================================================
   FORM ELEMENT RESET
   ========================================================================== */

button{
    font-family:inherit;
}

input,
select,
textarea{
    font-family:inherit;
    font-size:inherit;
}



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

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

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

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

.w-100{
    width:100%;
}

.d-none{
    display:none !important;
}

.d-flex{
    display:flex;
}

.align-center{
    align-items:center;
}

.justify-between{
    justify-content:space-between;
}

.gap-sm{
    gap:8px;
}

.gap-md{
    gap:16px;
}

.gap-lg{
    gap:24px;
}



/* ==========================================================================
   SELECTION
   ========================================================================== */

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