/* ==========================================================================
   Geenkeu-S Design Tokens
   Source of truth: docs/brand-guidelines.md + assets/design-tokens.json
   --------------------------------------------------------------------------
   Do NOT edit hard-coded values in component CSS. Reference these variables.
   ========================================================================== */

:root {
  /* ---- Primitive: Color ------------------------------------------------- */
  --color-green-darker: #071a0e;
  --color-green-dark:   #0d2a18;
  --color-green-mid:    #14432a;
  --color-green-soft:   #1f6038;

  --color-copper-dark:  #9a5f29;
  --color-copper:       #b87333;
  --color-copper-light: #d89158;

  --color-mint:         #2dd4a0;
  --color-mint-deep:    #1ea683;

  --color-cream:        #fdf6ee;
  --color-cream-dark:   #f4ead9;

  --color-white:        #ffffff;
  --color-ink:          #1a1a1a;
  --color-ink-muted:    #55605a;
  --color-border:       #e8dfd0;

  --color-danger:       #c0392b;
  --color-warning:      #c98a16;
  --color-success:      #1ea683;
  --color-info:         #0e6fa3;

  /* ---- Legacy aliases (kept for compatibility with css/styles.css) ----- */
  --copper:        var(--color-copper);
  --copper-dark:   var(--color-copper-dark);
  --copper-light:  var(--color-copper-light);
  --green-dark:    var(--color-green-dark);
  --green-darker:  var(--color-green-darker);
  --green-mid:     var(--color-green-mid);
  --mint:          var(--color-mint);
  --cream:         var(--color-cream);
  --cream-dark:    var(--color-cream-dark);
  --white:         var(--color-white);
  --text:          var(--color-ink);
  --text-muted:    var(--color-ink-muted);
  --border:        var(--color-border);

  /* ---- Primitive: Spacing (4pt grid) ----------------------------------- */
  --space-0:  0;
  --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-14: 56px;
  --space-20: 80px;
  --space-30: 120px;

  /* ---- Primitive: Typography ------------------------------------------- */
  --font-body:    'Inter', Helvetica, Arial, sans-serif;
  --font-display: 'Inter', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --fs-display: clamp(2.4rem, 5vw, 4.2rem);
  --fs-h2:      clamp(1.8rem, 3.5vw, 2.6rem);
  --fs-h3:      1.35rem;
  --fs-h4:      1.05rem;
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-eyebrow: 13px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-body:  1.65;

  --ls-tight:   -0.03em;
  --ls-heading: -0.02em;
  --ls-eyebrow: 0.14em;

  /* ---- Primitive: Radius / Shadow / Motion ----------------------------- */
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(13,42,24,.06), 0 1px 2px rgba(13,42,24,.04);
  --shadow-md: 0 6px 20px rgba(13,42,24,.08), 0 2px 6px rgba(13,42,24,.04);
  --shadow-lg: 0 18px 40px rgba(13,42,24,.12), 0 4px 12px rgba(13,42,24,.06);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  --ease-out:    cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.5, 1.5, 0.4, 1);

  /* ---- Semantic -------------------------------------------------------- */
  --bg:              var(--color-cream);
  --bg-elevated:     var(--color-white);
  --bg-subtle:       var(--color-cream-dark);
  --bg-inverse:      var(--color-green-darker);
  --bg-inverse-soft: var(--color-green-dark);

  --fg:              var(--color-ink);
  --fg-muted:        var(--color-ink-muted);
  --fg-on-inverse:   var(--color-cream);

  --primary:         var(--color-copper);
  --primary-hover:   var(--color-copper-dark);
  --primary-fg:      var(--color-cream);
  --accent:          var(--color-green-dark);

  --border-color:    var(--color-border);
  --border-strong:   var(--color-green-dark);

  --focus-ring:      var(--color-copper);

  /* ---- Layout ---------------------------------------------------------- */
  --max-width:       1160px;
  --container-pad:   var(--space-6);
  --section-py:      var(--space-20);
  --section-py-sm:   var(--space-14);
}

/* Respecteer gebruikersvoorkeur: minder beweging */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}

/* Dark-mode kandidaat (nog niet actief op publieke site) */
@media (prefers-color-scheme: dark) {
  :root.supports-dark {
    --bg:           var(--color-green-darker);
    --bg-elevated:  var(--color-green-dark);
    --bg-subtle:    var(--color-green-mid);
    --fg:           var(--color-cream);
    --fg-muted:     #b9c3bc;
    --border-color: rgba(253, 246, 238, 0.14);
  }
}