/*
 * Design Tokens — Eggink Schilders
 * ----------------------------------------
 * Vul hier de project-specifieke waarden in.
 * Refereer in componenten altijd naar var(--...).
 */

:root {

  /* ============================================
   * KLEUREN — pas aan per project
   * ============================================ */

  /* Merk */
  --color-primary:       #1a1f21;     /* Hoofdkleur — koppen, accenten */
  --color-primary-dark:  #0d1011;     /* Donkerdere variant */
  --color-accent:        #789f1e;     /* Actie-kleur — buttons, CTA */

  /* Achtergronden */
  --color-bg-white:      #ffffff;
  --color-bg-light:      #f8f7f4;     /* Lichte secties */
  --color-bg-dark:       rgba(26, 31, 33, 0.7);  /* Overlay */

  /* Tekst */
  --color-text-body:     #666666;
  --color-text-heading:  #1a1f21;
  --color-text-light:    #ffffff;
  --color-text-nav:      #ffffff;
  --color-text-muted:    #999999;

  /* Borders */
  --color-border:        #e5e2d9;
  --color-border-light:  rgba(0, 0, 0, 0.1);

  /* ============================================
   * TYPOGRAFIE — pas aan per project
   * ============================================ */

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

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

  /* Sizes */
  --text-xs:     12px;
  --text-sm:     14px;
  --text-base:   16px;
  --text-lg:     18px;
  --text-xl:     20px;
  --text-2xl:    24px;
  --text-3xl:    36px;
  --text-4xl:    48px;
  --text-5xl:    64px;

  /* Line heights */
  --leading-none:     1;
  --leading-tight:    1.2;
  --leading-normal:   1.4;
  --leading-relaxed:  1.6;

  /* Letter spacing */
  --tracking-normal:  0;
  --tracking-wide:    0.5px;

  /* ============================================
   * SPACING — 4px schaal
   * ============================================ */

  --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;

  /* ============================================
   * LAYOUT
   * ============================================ */

  --container-max:        1240px;
  --section-padding-y:    80px;
  --section-padding-x:    24px;

  /* ============================================
   * EFFECTEN
   * ============================================ */

  --shadow-sm:    0 2px 8px rgba(0,0,0,0.08);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.1);

  --radius-none:  0;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-full:  9999px;

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;

  /* === Project overrides (uit design-system.json) === */
  --color-accent-dark: #6a8f1a;
  --color-bg-lighter: #f0ede5;
  --color-bg-secondary: #efece5;
  --color-bg-component: #f5f3ed;
  --color-bg-topbar: #30383b;
  --color-border-hover: #dcd8ce;
  --color-icon-green: #a8cc4f;
  --color-success: #4c9b4e;
  --color-info: #3b82f6;
  --color-warning: #f59e0b;
  --font-medium: 500;
  --leading-snug: 1.3;
  --tracking-tight: -0.01em;
  --tracking-snug: -0.005em;
  --grid-gap: 24px;
  --radius-lg: 12px;
  --radius-xl: 24px;
  --radius-pill: 20px;
  --shadow-primary-hover: 0 8px 16px rgba(120, 159, 30, 0.2);
  --shadow-dark-hover: 0 8px 16px rgba(0,0,0,0.2);
  --transition-slow: 0.5s ease;
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1240px;
  --btn-padding-md: 12px 24px;
  --btn-font-size: 14px;
  --btn-font-weight: 600;
  --input-padding: 12px 16px;
  --input-radius: 8px;
  --card-radius: 12px;
  --card-padding: 24px;

}