/*
 * Design Tokens — Bistro 't Leven
 * Gegenereerd op basis van Figma design
 * ----------------------------------------
 * Pas hier de huisstijl aan — alle componenten
 * gebruiken automatisch de nieuwe waarden.
 */

:root {

  /* ----------------------------------------
   * KLEUREN
   * ---------------------------------------- */

  /* Primair palet */
  --color-primary:        #826239;   /* Goudbruin — koppen, accenten */
  --color-primary-dark:   #6a4f2e;   /* Donkerder goudbruin — hover states */
  --color-accent:         #B33E24;   /* Rood-oranje — buttons, CTA */
  --color-accent-dark:    #922f1a;   /* Donkerder rood — button hover */

  /* Achtergronden */
  --color-bg-white:       #FFFFFF;
  --color-bg-creme:       #FFF6EB;   /* Lichte secties */
  --color-bg-goud:        #826239;   /* Donkere CTA secties */
  --color-bg-dark:        rgba(0, 0, 0, 0.71); /* Hero/header overlay */

  /* Tekst */
  --color-text-body:      #000000;
  --color-text-heading:   #826239;
  --color-text-light:     #FFFFFF;
  --color-text-nav:       #FFFFFF;
  --color-text-muted:     #555555;   /* Afgezwakt grijs — beschrijvingen, hulptekst */

  /* Borders & dividers */
  --color-border:         #826239;
  --color-border-light:   rgba(130, 98, 57, 0.2);

  /* ----------------------------------------
   * TYPOGRAFIE
   * ---------------------------------------- */

  --font-heading:         'Vollkorn', Georgia, serif;
  --font-body:            'Inter', system-ui, sans-serif;

  /* Groottes */
  --text-xs:              12px;
  --text-sm:              14px;
  --text-base:            16px;
  --text-lg:              18px;
  --text-xl:              22px;
  --text-2xl:             28px;
  --text-3xl:             36px;
  --text-4xl:             48px;
  --text-5xl:             64px;

  /* Gewichten */
  --font-regular:         400;
  --font-semibold:        600;
  --font-bold:            700;
  --font-extrabold:       800;

  /* Line heights */
  --leading-tight:        1.2;
  --leading-normal:       1.5;
  --leading-relaxed:      1.7;

  /* Letter spacing */
  --tracking-normal:      0;
  --tracking-wide:        0.01em;  /* 1% */

  /* ----------------------------------------
   * SPACING
   * ---------------------------------------- */

  --space-1:              4px;
  --space-2:              8px;
  --space-3:              12px;
  --space-4:              16px;
  --space-5:              20px;
  --space-6:              24px;
  --space-8:              32px;
  --space-10:             40px;
  --space-12:             48px;
  --space-16:             64px;
  --space-20:             80px;
  --space-24:             96px;
  --space-32:             128px;

  /* Sectie padding */
  --section-padding-y:    80px;
  --section-padding-x:    24px;

  /* ----------------------------------------
   * LAYOUT
   * ---------------------------------------- */

  --container-max:        1280px;
  --container-wide:       1400px;

  /* ----------------------------------------
   * BORDER RADIUS
   * ---------------------------------------- */

  --radius-sm:            2px;    /* Buttons */
  --radius-md:            4px;
  --radius-lg:            8px;
  --radius-xl:            12px;
  --radius-none:          0px;    /* Menu tabs */

  /* ----------------------------------------
   * SCHADUWEN
   * ---------------------------------------- */

  --shadow-sm:            0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:            0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:            0 8px 32px rgba(0,0,0,0.14);

  /* ----------------------------------------
   * TRANSITIONS
   * ---------------------------------------- */

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

}