/*
Theme Name: FFENL Theme
Theme URI:
Author: FFENL
Author URI:
Description: Maatwerk thema voor FFENL, gebouwd met Elementor Pro.
Version: 1.3.7
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: ffenl-theme
*/

/* ============================================================================
   DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   Alle tokens worden via Elementor Pro gerefereerd als var(--token-naam)
   ============================================================================ */

:root {

  /* --------------------------------------------------------------------------
     MERKKLEUREN (rechtstreeks uit het logo)
     -------------------------------------------------------------------------- */
  --brand-forest-deep : #2f5048;   /* donker bosgroen    */
  --brand-forest-mid  : #3f7052;   /* middel bosgroen    */
  --brand-cream       : #f2e4cf;   /* warm crème         */
  --brand-sage        : #b8c8a0;   /* saliegroen         */
  --brand-mahogany    : #5c3a2e;   /* mahonie­bruin       */

  /* --------------------------------------------------------------------------
     UITGEBREID KLEURENPALET
     -------------------------------------------------------------------------- */

  /* Groen schaal */
  --clr-forest-950 : #111f1c;
  --clr-forest-900 : #1e342f;
  --clr-forest-800 : #2f5048;   /* = brand-forest-deep */
  --clr-forest-700 : #3f7052;   /* = brand-forest-mid  */
  --clr-forest-600 : #4d8564;
  --clr-forest-500 : #5a9a74;
  --clr-forest-400 : #7ab58e;
  --clr-forest-300 : #b8c8a0;   /* = brand-sage        */
  --clr-forest-200 : #d4e2c0;
  --clr-forest-100 : #eaf2e0;
  --clr-forest-50  : #f4f9f0;

  /* Crème / warm beige schaal */
  --clr-cream-900  : #7a5c30;
  --clr-cream-800  : #a07840;
  --clr-cream-700  : #c09858;
  --clr-cream-600  : #d8b880;
  --clr-cream-500  : #e8ceaa;
  --clr-cream-400  : #f2e4cf;   /* = brand-cream       */
  --clr-cream-300  : #f7eede;
  --clr-cream-200  : #faf5eb;
  --clr-cream-100  : #fdfaf5;

  /* Mahonie schaal */
  --clr-mahogany     : #5c3a2e;   /* = brand-mahogany (alias voor gebruik in componenten) */
  --clr-mahogany-950 : #1a0d09;
  --clr-mahogany-900 : #3d2218;
  --clr-mahogany-800 : #5c3a2e;   /* = brand-mahogany   */
  --clr-mahogany-700 : #7a4e40;
  --clr-mahogany-600 : #8a5a4a;
  --clr-mahogany-500 : #aa7a68;
  --clr-mahogany-400 : #c89e8c;
  --clr-mahogany-300 : #e0c4b4;

  /* --------------------------------------------------------------------------
     SEMANTISCHE KLEUREN
     Gebruik deze in ontwerp en Elementor, niet de schaalvarianten.
     -------------------------------------------------------------------------- */

  /* Achtergronden */
  --clr-bg          : #faf8f4;   /* paginaachtergrond — warm wit        */
  --clr-bg-alt      : #f2e4cf;   /* crème sectie-achtergrond            */
  --clr-bg-subtle   : #eaf2e0;   /* licht groen accent-achtergrond      */
  --clr-bg-dark     : #2f5048;   /* donkere sectie                      */
  --clr-bg-darker   : #1e342f;   /* nog donkerder voor contrast         */
  --clr-bg-card     : #ffffff;   /* kaartachtergrond                    */

  /* Tekst */
  --clr-text        : #1c2820;   /* primaire tekst — donker met groentint */
  --clr-text-muted  : #4a5e55;   /* secundaire tekst                    */
  --clr-text-subtle : #7a8e84;   /* placeholder / uitgeschakeld         */
  --clr-text-light  : #f2e4cf;   /* tekst op donkere achtergrond        */
  --clr-text-heading: #2f5048;   /* koptekstkleur                       */

  /* Interactie */
  --clr-primary        : #2f5048;
  --clr-primary-hover  : #3f7052;
  --clr-primary-active : #1e342f;
  --clr-primary-light  : #eaf2e0;

  --clr-accent         : #5c3a2e;
  --clr-accent-hover   : #7a4e40;
  --clr-accent-light   : #f7eede;

  /* Randen */
  --clr-border         : #ddd5c4;   /* neutrale warme rand     */
  --clr-border-strong  : #b8c8a0;   /* salige rand             */
  --clr-border-dark    : #3f7052;   /* rand op donkere vlakken */

  /* Status */
  --clr-success   : #3f7052;
  --clr-warning   : #c09858;
  --clr-error     : #a03030;

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

  /* Lettertypefamilies */
  --ff-display : 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-body    : 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --ff-mono    : 'DM Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Vloeiende typeschaal (min → max via viewport) */
  --fs-xs   : clamp(0.75rem,  0.72rem + 0.15vw, 0.875rem);  /*  12–14px */
  --fs-sm   : clamp(0.875rem, 0.84rem + 0.18vw, 1rem);      /*  14–16px */
  --fs-base : clamp(1rem,     0.96rem + 0.2vw,  1.125rem);  /*  16–18px */
  --fs-md   : clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);   /*  18–20px */
  --fs-lg   : clamp(1.25rem,  1.1rem  + 0.75vw, 1.5rem);    /*  20–24px */
  --fs-xl   : clamp(1.5rem,   1.25rem + 1.25vw, 2rem);      /*  24–32px */
  --fs-2xl  : clamp(1.875rem, 1.5rem  + 1.88vw, 2.75rem);   /*  30–44px */
  --fs-3xl  : clamp(2.25rem,  1.75rem + 2.5vw,  3.75rem);   /*  36–60px */
  --fs-4xl  : clamp(2.75rem,  2rem    + 3.75vw, 5rem);      /*  44–80px */

  /* Gewichten */
  --fw-light    : 300;
  --fw-regular  : 400;
  --fw-medium   : 500;
  --fw-semibold : 600;
  --fw-bold     : 700;

  /* Regelafstanden */
  --lh-tight   : 1.1;
  --lh-snug    : 1.3;
  --lh-normal  : 1.65;
  --lh-relaxed : 1.8;

  /* Letterafstanden */
  --ls-tighter : -0.03em;
  --ls-tight   : -0.01em;
  --ls-normal  :  0em;
  --ls-wide    :  0.04em;
  --ls-wider   :  0.08em;
  --ls-widest  :  0.15em;

  /* --------------------------------------------------------------------------
     RUIMTE / SPATIËRING
     -------------------------------------------------------------------------- */
  --space-px  :  1px;
  --space-0-5 :  0.125rem;  /*  2px */
  --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-7   :  1.75rem;   /* 28px */
  --space-8   :  2rem;      /* 32px */
  --space-10  :  2.5rem;    /* 40px */
  --space-12  :  3rem;      /* 48px */
  --space-14  :  3.5rem;    /* 56px */
  --space-16  :  4rem;      /* 64px */
  --space-20  :  5rem;      /* 80px */
  --space-24  :  6rem;      /* 96px */
  --space-32  :  8rem;      /* 128px */
  --space-40  : 10rem;      /* 160px */

  /* Vloeiende sectie-padding */
  --section-py : clamp(4rem, 3rem + 5vw, 8rem);
  --section-px : clamp(1.5rem, 5vw, 3rem);

  /* --------------------------------------------------------------------------
     AFMETINGEN & LAYOUT
     -------------------------------------------------------------------------- */
  --container-xs  :  480px;
  --container-sm  :  640px;
  --container-md  :  768px;
  --container-lg  :  1024px;
  --container-xl  :  1280px;
  --container-2xl :  1440px;
  --container-max :  1600px;

  /* --------------------------------------------------------------------------
     RAND­RADIUS
     -------------------------------------------------------------------------- */
  --radius-xs   :  2px;
  --radius-sm   :  4px;
  --radius-md   :  8px;
  --radius-lg   :  16px;
  --radius-xl   :  24px;
  --radius-2xl  :  32px;
  --radius-full :  9999px;

  /* --------------------------------------------------------------------------
     SCHADUWEN  (groen-getinte box-shadows voor sfeer)
     -------------------------------------------------------------------------- */
  --shadow-xs : 0 1px 2px rgba(30, 52, 47, 0.06);
  --shadow-sm : 0 1px 4px rgba(30, 52, 47, 0.08), 0 1px 2px rgba(30, 52, 47, 0.04);
  --shadow-md : 0 4px 16px rgba(30, 52, 47, 0.10), 0 2px 6px rgba(30, 52, 47, 0.06);
  --shadow-lg : 0 8px 32px rgba(30, 52, 47, 0.12), 0 4px 12px rgba(30, 52, 47, 0.07);
  --shadow-xl : 0 20px 60px rgba(30, 52, 47, 0.14), 0 8px 24px rgba(30, 52, 47, 0.09);
  --shadow-inner: inset 0 2px 6px rgba(30, 52, 47, 0.08);

  /* --------------------------------------------------------------------------
     OVERGANGEN / ANIMATIES
     -------------------------------------------------------------------------- */
  --ease-in-out  : cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out     : cubic-bezier(0.0, 0, 0.2, 1);
  --ease-in      : cubic-bezier(0.4, 0, 1, 1);
  --ease-spring  : cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast   : 150ms var(--ease-in-out);
  --transition-base   : 250ms var(--ease-in-out);
  --transition-slow   : 400ms var(--ease-in-out);
  --transition-spring : 320ms var(--ease-spring);

  /* --------------------------------------------------------------------------
     Z-INDEX STACK
     -------------------------------------------------------------------------- */
  --z-below    : -1;
  --z-base     :  0;
  --z-raised   :  10;
  --z-dropdown :  100;
  --z-sticky   :  200;
  --z-overlay  :  300;
  --z-modal    :  400;
  --z-toast    :  500;
}