/*  CSS variables: 
    Defining reusable values for colors, margins, fonts, etc. */
:root {

    /* border */
    --border-weight:    2.5px;

    /* heights en widths */
    --header-height:        calc(3rem + 2rem);
    --header-logo-width:    calc(3rem * 1.1320312); /* hoogte * ratio of logo */
    --header-bar-width:     35px;

    /* fonts */
    --font-family__source-sans-3: "Source Sans 3", serif;
    --font-family__source-serif-4:"Source Sans 4", serif;
    --font-family__sofia: "Sofia Sans Extra Condensed", serif;

    /* colors - dont use in global */
    --black:            #0d1321;
    --very-dark:        #1d2d44;
    --dark:             #012a36;
    --grey-dark:        #8c8b8d;
    --grey:             #c2bacb;
    --light:            #dad4de;
    --very-light:       #e8e4eb;
    --white:            #f1eef2;
    --accent-very-dark: #4c061d;
    --accent-dark:      #840b33;
    --accent-bright:    #d91254;

    /* colors - use in global */
    --color-primary-background:     var(--light);
    --color-secundary-background:   var(--very-light);
    --color-tertiairy-background:    var(--white);

    --color-primary:    var(--very-dark);
    --color-secundary:  var(--dark);
    --color-tertiairy:   var(--black);
    --color-grey:       var(--grey-dark);

    --accent-primary:   var(--accent-dark);
    --accent-secundary: var(--accent-bright);
    --accent-tertiairy:  var(--accent-very-dark);   
    
    & .dark {
    --color-primary-background:     var(--black);
    --color-secundary-background:   var(--very-dark);
    --color-tertiairy-background:    var(--dark);

    --color-primary:    var(--light);
    --color-secundary:  var(--very-light);
    --color-tertiairy:   var(--white);
    --color-grey:       var(--grey-dark);

    --accent-primary:   var(--accent-dark);
    --accent-secundary: var(--accent-very-dark);
    --accent-tertiairy:  var(--accent-bright);
    }

}

/*  Flexbox or Grid helper classes: 
    Predefined flexbox or grid patterns. */
.flex, .grid {
    gap: 1rem;
}
.gap__3 {
    gap: 3rem;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flex-column {
    flex-direction: column;
    height: calc(100% - 10rem);
}
.flex-center {
    justify-content: center;
}
.flex__small {
    justify-content: left;
    flex-wrap: wrap;
}
.flex-end {
    justify-content: end;
}

.flex-grow_1 {
    flex-grow: 1;
}
.flex-grow_2 {
    flex-grow: 2;
}
.fixed-width {
    width: 40%;
    height: 50svh;
}
.flex-dir_column:has(.sect-colors) {
    flex-wrap: wrap;
    align-content: center;
}

.grid {
    display: grid;
}
.col_3 {
    grid-template-columns: repeat(
        auto-fill, minmax(min(250px, 100%), 1fr));
}
.col_2 {
    grid-template-columns: repeat(
        auto-fill, minmax(min(350px, 100%), 1fr));
}
.col_full-width {
    grid-column: 1/-1;
}

.container {
    margin-block: 1rem;
    margin-inline: auto;
    width: min(71.2rem, calc(100vw - 4rem));
}


/*  Typography mixins: 
    Reusable font sizes, line heights, etc. */
.font-weight__thin        { font-weight: 100; }
.font-weight__extraLight  { font-weight: 200; }
.font-weight__light       { font-weight: 300; }
.font-weight__regular     { font-weight: 400; }
.font-weight__medium      { font-weight: 500; }
.font-weight__semibold    { font-weight: 600; }
.font-weight__bold        { font-weight: 700; }
.font-weight__extraBold   { font-weight: 800; }
.font-weight__black       { font-weight: 900; }

.font-style__italic       { font-style: italic; }

.margin-block__1 {
    margin-block: 1rem;
}
.margin-top__1 {
    margin-top: 1rem;
}
.margin-block__2 {
    margin-block: 2rem;
}
.margin-block__3 {
    margin-block: 3rem;
}
.margin-inline__1 {
    margin-inline: 1rem;
}
.margin-bottom__3 {
    margin-bottom: 3rem;
}
.padding-block__3 {
    padding-block: 3rem;
}

.color__accent-primary {
    color: var(--accent-primary);
}
.color__accent-secundary {
    color: var(--accent-secundary);
}
.color__accent-tertiairy {
    color: var(--accent-tertiairy);
}
/*  Shadows, borders, gradients, etc.: 
    Reusable visual effects. */

.border-devider {
    border-right: var(--border-weight) solid var(--accent-primary);
}