/* ==========================================================================
   SETTINGS.CSS - BaseBr Theme
   Bevat: Fonts, Baseline Grid, Typografie en Layout Variabelen
   ========================================================================== */





:root {
 

    --color-wit: #FFFFFF;
    --color-kalk: #F5F2EA;
    --color-maasgroen: #00847E;
    --color-skyline: #ccd8f0;
    --color-zwart: #090909;
    --color-horizon: #FFA282;
    --color-kadeblauw: #2A4374;
    --color-zeegroen: #3FC5BF;
    --color-donkergroen: #1A362D; 
    

    --clr-bg: #ffffff;
    --clr-text: #1a1a1a;
    --clr-pri: #0033cc;
    --clr-sec: #ff5500;

    /* 3. TYPOGRAFIE BASIS */
    --font-body: 'Futura Medium', Helvetica, Arial, sans-serif;
    --font-heading: 'Futura Medium', Helvetica, Arial, sans-serif;

    /* 4. DE BRON: Vloeiende basis lettergrootte */
    --f-size-base: clamp(16px, 1.5vw + 8px, 20px);
    
    /* 5. BASELINE GRID LOGICA
       We fixeren de regelafstand van de body op 1.5. 
       De baseline unit is de helft daarvan (0.75) voor maximale flexibiliteit. */
    --baseline: calc(var(--f-size-base) * 0.75); 

    /* 6. TYPOGRAFIE SCHAAL (Trapsgewijs) */
    --f-size-h1: calc(var(--f-size-base) * 3);
    --f-size-h2: calc(var(--f-size-base) * 2.25);
    --f-size-h3: calc(var(--f-size-base) * 1.5);
    --f-size-h4: calc(var(--f-size-base) * 1.25);

    /* 7. SPACING (Alles gekoppeld aan de baseline voor verticaal ritme) */
    --gutter:   calc(var(--baseline) * 2); /* De --gutter variabele voor kolommen */
    --space-sm: var(--baseline);
    --space-md: calc(var(--baseline) * 2);
    --space-lg: calc(var(--baseline) * 4);
    --space-xl: calc(var(--baseline) * 8);
    
    /* Marge aan de zijkanten op kleine schermen */
    --margin-lg: var(--space-lg);



            
    /* Maatvoering - Flexibel */
    --font-size: clamp(16px, 1.5vw + 8px, 20px);
    --font-size-large: calc( var(--font-size) * 2.25);
    --font-size-ml: calc(var(--font-size) * 1.5);
    --font-size-small: calc( var(--font-size) * 0.7);
    --marge: clamp(0.8em, 2vw, 2em);
    --line-thickness: 1px; 
    --logo-color: var(--color-wit); 
    --btn-height: 2em; 
    --border-radius: 0.25em;



}



@font-face {
    font-family: 'BaseBrFont';
    src: url('../fonts/IBMPlexMono-Light.woff2') format('woff2'),
         url('../fonts/basebr-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura Medium';
    src: url('../fonts/futura_medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Futura Book';
    src: url('../fonts/futura-book.woff2') format('woff2'),
         url('../fonts/futura-book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================================
   BASIS STYLING & BASELINE LOCK
   ========================================================================== */

   

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


body {
    background-color: var(--color-kalk);
    color: var(--color-wit);    
    font-family: var(--font-body);
    font-size: var(--f-size-base);
    font-weight: normal;
    /* Baseline lock: elke regel is exact 2 baselines hoog */
    line-height: calc(var(--baseline) * 2); 
    margin: 0;

    /* --- DEBUG HULPMIDDEL --- 
       Haal de comments hieronder weg om je baseline grid visueel te controleren. 
       De tekst moet precies 'op' de cyaan lijntjes rusten. */
    /* background-image: linear-gradient(to bottom, cyan 1px, transparent 1px);
    background-size: 100% var(--baseline);  */
   
}



/* ==========================================================================
   HEADINGS (GELOCKED OP HET GRID)
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: normal;
    margin-top: var(--baseline);
    margin-bottom: var(--space-md); 
    color: var(--color-zwart);
}

/* Berekening voor perfecte Baseline-alignment:
   (Aantal baselines * --baseline) / eigen font-size = unitloze line-height 
*/
h1 { 
    font-size: var(--f-size-h1); 
    line-height: calc((var(--baseline) * 4) / var(--f-size-h1)); 
}
h2 { 
    font-size: var(--f-size-h2); 
    line-height: calc((var(--baseline) * 3) / var(--f-size-h2)); 
}
h3 { 
    font-size: var(--f-size-h3); 
    line-height: calc((var(--baseline) * 2) / var(--f-size-h3)); 
}
h4 { 
    font-size: var(--f-size-h4); 
    line-height: calc((var(--baseline) * 2) / var(--f-size-h4)); 
}

/* ==========================================================================
   LAYOUT: 12-KOLOMS FULL-BLEED GRID
   ========================================================================== */



/* Handmatige kolom-spans (Desktop) */
.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 8; }
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }