/* =============================================================
   CSS Custom Properties – Vitaliteitswinkel
   Tekstdomein: vitaliteitswinkel
   ============================================================= */

:root {

  /* Brand colours */
  --color-creme:          #f7f3ec;
  --color-creme-dark:     #ede6d8;
  --color-creme-card:     #faf7f2;
  --color-amber:          #c8960c;
  --color-amber-light:    #e5b828;
  --color-amber-pale:     #f5e199;
  --color-amber-rgb:      200, 150, 12;
  --color-groen:          #5a7a4a;
  --color-groen-light:    #7a9e68;
  --color-groen-pale:     #dae8d3;
  --color-groen-rgb:      90, 122, 74;
  --color-bruin:          #2c1f0e;
  --color-bruin-mid:      #5c4030;
  --color-bruin-zacht:    #8a6a52;

  /* Text */
  --color-tekst:          #2c1f0e;
  --color-tekst-zacht:    #6b5040;
  --color-font-default:   var(--color-tekst);

  /* Borders */
  --border-groen:         rgba(90,122,74,0.18);
  --border-groen-hover:   rgba(90,122,74,0.45);

  /* Status / Alert */
  --color-alert-bg:       #c62828;
  --color-alert-tekst:    #ffffff;
  --color-info-bg:        var(--color-amber-pale);
  --color-info-tekst:     var(--color-bruin);
  --color-success-bg:     var(--color-groen);
  --color-success-tekst:  var(--color-creme);

  /* Typography */
  --font-display:         'Playfair Display', Georgia, serif;
  --font-body:            'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-size-base:       16px;

  /* Layout */
  --container-width:      1180px;
  --container-padding:    40px;

  /* Radius */
  --radius:               3px;
  --radius-sm:            2px;
  --radius-md:            6px;

  /* Spacing */
  --space-xs:             0.5rem;
  --space-sm:             1rem;
  --space-md:             2rem;
  --space-lg:             4rem;
  --space-xl:             6.25rem;
  --section-padding:      6.25rem;

  /* Shadows */
  --shadow:               0 4px 24px 0 rgba(44,31,14,0.10);
  --shadow-amber:         0 4px 24px 0 rgba(200,150,12,0.15);

  /* Transitions */
  --ease:                 0.35s cubic-bezier(0.4, 0, 0.2, 1);

  /* Navigation */
  --nav-height:           80px;
  --nav-height-mobile:    66px;

}