/* =========================================================
   KVvV Design Tokens — :root custom properties
   Alias-laag naar theme.json palette voor non-Gutenberg secties.
   Bron: themes/kvvv/content/_dev-brief-brand-assets.md §3-7
   ========================================================= */

:root {
  /* ===== Identity (groen) ===== */
  --kvvv-brand-green:         var(--wp--preset--color--brand-green,        #5EB245);
  --kvvv-brand-green-dark:    var(--wp--preset--color--brand-green-dark,   #4A9B35);
  --kvvv-brand-green-darker:  var(--wp--preset--color--brand-green-darker, #357321);
  --kvvv-brand-green-light:   var(--wp--preset--color--brand-green-light,  #E8F5DC);

  /* ===== Action (oranje) ===== */
  --kvvv-brand-orange:        var(--wp--preset--color--brand-orange,       #ED8A1E);
  --kvvv-brand-orange-dark:   var(--wp--preset--color--brand-orange-dark,  #C9710F);
  --kvvv-brand-orange-light:  var(--wp--preset--color--brand-orange-light, #FCE7C8);

  /* ===== Heritage (goud + blauw) ===== */
  --kvvv-gold:                var(--wp--preset--color--gold,               #C9A24C);
  --kvvv-gold-dark:           var(--wp--preset--color--gold-dark,          #A88636);
  --kvvv-gold-light:          #F8EDD4; /* designer-brief 2026-05-25 — typo in brief corrigerend van #F8ED D4 */
  --kvvv-brand-blue:          var(--wp--preset--color--brand-blue,         #009CDF);

  /* ===== Surface ===== */
  --kvvv-cream:               var(--wp--preset--color--cream,         #F8F1DF);
  --kvvv-paper:               var(--wp--preset--color--paper,         #FDF8EB);
  --kvvv-surface:             var(--wp--preset--color--surface,       #FFFFFF);
  --kvvv-ink:                 var(--wp--preset--color--ink,           #1F2820);
  --kvvv-footer-green:        var(--wp--preset--color--footer-green,  #1F4012);

  /* ===== Text ===== */
  --kvvv-text:                var(--wp--preset--color--text,       #1F2820);
  --kvvv-text-soft:           var(--wp--preset--color--text-soft,  #4D5A4E);
  --kvvv-text-muted:          var(--wp--preset--color--text-muted, #7D887F);

  /* ===== Border ===== */
  --kvvv-border:              var(--wp--preset--color--border,        #E5DDC5);
  --kvvv-border-strong:       var(--wp--preset--color--border-strong, #C9BFA2);

  /* ===== Status (extension — empty-states / errors) ===== */
  --kvvv-success:             #5EB245;  /* = brand-green */
  --kvvv-danger:              #D43B3B;
  --kvvv-warning:             #ED8A1E;  /* = brand-orange */

  /* ===== Typography scale ===== */
  --kvvv-fs-h1:               clamp(1.875rem, 5vw,   3.25rem);   /* 30→52px */
  --kvvv-fs-h2:               clamp(1.375rem, 3.5vw, 2.125rem);  /* 22→34px */
  --kvvv-fs-h3:               1.375rem;                          /* 22px    */
  --kvvv-fs-lead:             clamp(1rem, 1.5vw, 1.125rem);      /* 16→18px */
  --kvvv-fs-body:             1rem;                              /* 16px    */
  --kvvv-fs-eyebrow:          0.75rem;                           /* 12px    */
  --kvvv-fs-caption:          0.8125rem;                         /* 13px    */

  /* Line-height + letter-spacing per rol */
  --kvvv-lh-tight:            1.1;
  --kvvv-lh-snug:             1.15;
  --kvvv-lh-normal:           1.5;
  --kvvv-lh-relaxed:          1.6;
  --kvvv-ls-tight:            -0.01em;
  --kvvv-ls-snug:             -0.005em;
  --kvvv-ls-eyebrow:          0.08em;

  /* ===== Spacing (8-pt grid) ===== */
  --kvvv-space-xs:            0.5rem;   /*  8px */
  --kvvv-space-sm:            1rem;     /* 16px */
  --kvvv-space-md:            1.5rem;   /* 24px */
  --kvvv-space-lg:            3rem;     /* 48px */
  --kvvv-space-xl:            4rem;     /* 64px */
  --kvvv-space-2xl:           5rem;     /* 80px */
  --kvvv-space-3xl:           6rem;     /* 96px */

  /* ===== Section-ritme + card-radius — één bron voor consistente verticale spacing ===== */
  --kvvv-section-py:          clamp(2.5rem, 5vw, 4rem); /* 40px (mobiel) → 64px (desktop) */
  --kvvv-radius-card:         12px;

  /* ===== Border-radius scale ===== */
  --kvvv-radius-xs:           4px;
  --kvvv-radius-sm:           8px;
  --kvvv-radius-md:           12px;
  --kvvv-radius-lg:           16px;
  --kvvv-radius-pill:         999px;

  /* ===== Shadow / elevation ===== */
  --kvvv-shadow-sm:           0 1px 2px  rgba(31, 40, 32, 0.04);
  --kvvv-shadow-md:           0 4px 12px rgba(31, 40, 32, 0.08);
  --kvvv-shadow-lg:           0 12px 32px rgba(31, 40, 32, 0.12);

  /* ===== Container ===== */
  --kvvv-container-max:       1200px;
  --kvvv-wide-max:            1440px;
}