@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground-rgb: 255, 255, 255;
        --background-start-rgb: 0, 0, 0;
        --background-end-rgb: 0, 0, 0;
    }
}


/* #region Algemene stijlen */
html {
    font-size: 18px;
}

body {
    font-family: 'Flanders Art Sans', sans-serif;
}

@layer components {
    body {
        @apply text-body text-slate-600
    }

    .a-common {
        @apply text-primary underline cursor-pointer
    }

    a {
        @apply a-common
    }

    .linkbutton {
        @apply a-common no-underline
    }

}

/* #region Hoofding */
@layer components {
    .h-common {
        @apply mb-4 mt-5 font-semibold text-black;
    }

    h1 {
        @apply h-common text-h1;
    }

    h2 {
        @apply h-common text-h2;
    }

    h3 {
        @apply h-common text-h3 mb-3;
    }

    h4 {
        @apply h-common text-h4 mb-3;
    }

    h5 {
        @apply h-common text-h5 mb-2;
    }

    h6 {
        @apply h-common text-h6 italic mb-2;
    }
}

/* #endregion Hoofding*/

/* #region Link */


/* #endregion Algemene stijlen*/





@layer utilities {
    .text-balance {
        text-wrap: balance;
    }

    .text-xxs {
        font-size: 0.55rem;
        /* 8px */
    }
}