/* =============================================================================
   variables.css — Design tokens voor Spiti Paul
   Importeer dit bestand als eerste in elk CSS-bestand.
   ============================================================================= */

:root {
    /* ----- Kleurpalet: mediterraan Kreta ----- */

    /* Primaire kleuren */
    --color-sea:        #1a6b8a;   /* diepblauw — zee van Kreta */
    --color-sea-dark:   #114f67;   /* donkerder blauw — hover, accenten */
    --color-sea-light:  #e8f4f8;   /* lichtblauw — achtergrondvlakken */
    --color-turquoise:  #2ab5c8;   /* turquoise — actieve elementen */
    --color-turquoise-light: #d0f0f5; /* licht turquoise — hover-states */

    /* Neutrale kleuren */
    --color-sand:       #f5f0e8;   /* warm zand — pagina-achtergrond */
    --color-sand-dark:  #e8e0d0;   /* donkerder zand — kaart-achtergrond */
    --color-white:      #ffffff;
    --color-text:       #2c3e50;   /* donkerblauw-grijs — body tekst */
    --color-text-light: #5a6a7a;   /* lichter — subtekst, labels */
    --color-border:     #d0dde5;   /* subtiele randen */

    /* Beschikbaarheidskleuren kalender */
    --color-avail-3:    #27ae60;   /* groen  — 3 kamers vrij */
    --color-avail-2:    #f4c430;   /* amber  — 2 kamers vrij */
    --color-avail-1:    #e67e22;   /* oranje — 1 kamer vrij */
    --color-avail-0:    #e74c3c;   /* rood   — vol */

    /* Status / feedback */
    --color-error:      #c0392b;
    --color-success:    #27ae60;

    /* ----- Typografie ----- */
    --font-base:        'Inter', Arial, sans-serif;
    --font-size-xs:     0.75rem;   /*  12px */
    --font-size-sm:     0.875rem;  /*  14px */
    --font-size-base:   1rem;      /*  16px */
    --font-size-lg:     1.125rem;  /*  18px */
    --font-size-xl:     1.25rem;   /*  20px */
    --font-size-2xl:    1.5rem;    /*  24px */
    --font-size-3xl:    2rem;      /*  32px */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold:   700;
    --line-height-tight:  1.3;
    --line-height-base:   1.6;

    /* ----- Spacing ----- */
    --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 */

    /* ----- Borders & Radii ----- */
    --radius-sm:  0.375rem;   /*  6px */
    --radius-md:  0.625rem;   /* 10px */
    --radius-lg:  1rem;       /* 16px */
    --radius-xl:  1.5rem;     /* 24px */
    --radius-full: 9999px;

    /* ----- Shadows ----- */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg:  0 10px 30px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.06);

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