/* =============================================
   variables.css – Design tokens voor Italiaans Huis
   ============================================= */

:root {
    /* Kleuren */
    --color-primary:        #3d7657;   /* Restaurantgroen */
    --color-primary-dark:   #173626;
    --color-primary-light:  #8fb69c;
    --color-secondary:      #153326;   /* Donker, knus groen */
    --color-accent:         #a96345;   /* Warm terracotta accent */
    --color-wood:           #8b5b35;
    --color-brick:          #b85f45;

    --color-white:          #ffffff;
    --color-off-white:      #fbf7ef;   /* Warme achtergrond */
    --color-light:          #efe7da;
    --color-light-border:   #dcc9b4;
    --color-text:           #243329;
    --color-text-muted:     #6a756d;
    --color-text-light:     #ffffff;

    /* Typografie */
    --font-heading: 'Georgia', 'Times New Roman', serif;
    --font-body:    'Helvetica Neue', 'Arial', sans-serif;

    --font-size-xs:  0.75rem;    /* 12px */
    --font-size-sm:  0.875rem;   /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-md:  1.125rem;   /* 18px */
    --font-size-lg:  1.25rem;    /* 20px */
    --font-size-xl:  1.5rem;     /* 24px */
    --font-size-2xl: 2rem;       /* 32px */
    --font-size-3xl: 2.5rem;     /* 40px */
    --font-size-4xl: 3rem;       /* 48px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semi:   600;
    --font-weight-bold:   700;

    --line-height-tight:  1.25;
    --line-height-base:   1.6;
    --line-height-loose:  1.8;

    /* Ruimte */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */

    /* Layout */
    --container-max:    1200px;
    --container-narrow: 800px;
    --container-px:     var(--space-6);

    /* Border */
    --border-radius-sm: 4px;
    --border-radius:    8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 18px;

    /* Schaduwen */
    --shadow-sm:  0 1px 3px rgba(20, 35, 28, 0.10);
    --shadow:     0 6px 18px rgba(20, 35, 28, 0.14);
    --shadow-md:  0 12px 32px rgba(20, 35, 28, 0.18);
    --shadow-lg:  0 22px 60px rgba(20, 35, 28, 0.24);

    /* Transitie */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* Z-lagen */
    --z-below:    -1;
    --z-base:      0;
    --z-above:     10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
}