@charset "utf-8";
/* CSS Document */

/* ========================================
   BASIS / VARIABELEN
======================================== */

:root {
    /* Blauwe tinten */
    --blue: #203A5A;
    --dark-blue: #0C1B2C;    
    --storm-blue: #4C6486;
    --soft-blue: #8FB2F2;
    --ice-blue: #C8DBF9;
	
    /* Bruine tinten */
	--brown-dark: #34150F;
    --brown: #724B39;
    --brown-light: #A68763;
	--karamel: #955125;
	--honey: #D39858;	
	--terra: #CF9D7B;
	
    /* Donkere tinten */    
    --jungle: #162127;	
	--jet: #3A3534;

    /* Lichte tinten */    
    --sand: #EACEAA;
    --kaki: #D7C9AE;
    --rock: #EAE0D2;
	--rice: #F3EFE6;
	--offwhite: #FCFAF6;
	
    background: var(--rock);
    color: var(--blue);
	--bg: var(--rock);

    /* Borders */	
	--border: 1px solid rgba(255, 255, 255, 0.55);
	--shadow: 0 2px 5px rgba(12, 27, 44, 0.06),
    		  0 14px 35px rgba(12, 27, 44, 0.12);

    /* Pagina en content */
    --page-padding: 20px;
    --section-padding: 72px;
    --content-padding: 12px;
    --content-gap: 10px;

    /* Afstanden */
    --gap-small: .8rem;
    --gap: 1rem;

    /* Afrondingen */
    --radius: 18px;
    --hero-radius: 40px;
	--content-radius: 2rem 2rem 0 0;

    /* Typografie */
    --font-heading: "Playfair Display", serif;
    --font-body: "Inter", sans-serif;

    /* Animaties */
    --transition: .5s ease;

    /* Hero */
    --hero-position: 70% center;

/* ========================================
       ZACHTE KAARTEN
    ======================================== */

    --card-radius: 1.75rem;
    --card-padding: clamp(1.25rem, 5vw, 1.75rem);

    --soft-card-bg: var(--offwhite);

    --soft-card-border:
        1px solid rgba(32, 58, 90, 0.06);

    --soft-card-shadow:
        0 1.25rem 3rem rgba(12, 27, 44, 0.10),
        0 0.25rem 0.75rem rgba(12, 27, 44, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);


    /* ========================================
       GLASS KAARTEN
    ======================================== */

    --glass-card-bg:
        rgba(252, 250, 246, 0.58);

    --glass-card-border:
        1px solid rgba(255, 255, 255, 0.52);

    --glass-card-shadow:
        0 1.5rem 3.5rem rgba(12, 27, 44, 0.13),
        0 0.3rem 1rem rgba(12, 27, 44, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.65);

    --glass-card-blur: 1.125rem;
}