/* ==================================================
   Lettertypen
   ================================================== */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-latin-normal-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-v20-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* ==================================================
   Kleuren, typografie en algemene instellingen
   ================================================== */

:root {

    /* HASMI-huisstijl */
    --color-primary: #4b7ac6;
    --color-accent: #f07019;

    /* Kleuren */
    --color-text-muted: #666666;
    --color-background: #ffffff;
    --color-background-light: #f5f5f5;
    --color-border: #dddddd;

    /* Footer */
    --color-footer-background: var(--color-primary);
    --color-footer-heading: #f5f5f5;
    --color-footer-muted: #f5f5f5;
    --color-footer-border: #dddddd;

    /* Lettertypen */
    --font-family: "Inter", sans-serif;

    /* Algemene lettergroottes */
    --font-size-xs: 0.75rem;       /* 12 px */
    --font-size-sm: 0.875rem;      /* 14 px */
    --font-size-base: 0.9375rem;   /* 15 px */
    --font-size-md: 1rem;          /* 16 px */
    --font-size-lg: 1.125rem;      /* 18 px */
    --font-size-xl: 1.375rem;      /* 22 px */
    --font-size-2xl: 1.75rem;      /* 28 px */

    /* Algemene tekst */
    --font-size-body: var(--font-size-base);

    /* Grote koppen op de homepage */
    --font-size-hero: clamp(2.25rem, 3.2vw, 2.75rem);
    --font-size-section: clamp(1.75rem, 2.5vw, 2.25rem);

    /* Pagina-indeling */
    --container-width: 1400px;

    /* Vormgeving */
    --radius-sm: 4px;
    --radius-md: 8px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);

    /* Footer */
    --color-footer-background: var(--color-primary);
}