/* Figma RI — site — intern · kleuren frame 2001:71 */
:root,
[data-theme="light"] {
  --bg: #f6f2ea;           /* Achtergrond */
  --bg-elev: #f9f5ef;
  --patrol: #1c1916;
  --patrol-mist: #d8d0c0;  /* Lijnkleur / mist */
  --bg-soft: var(--patrol-mist);
  --bg-secondary: var(--patrol-mist);

  --ink: #2a2620;          /* Tekst (donker) */
  --muted: #8e8e93;
  --line: #d8d0c0;         /* Lijnkleur */

  --accent: #b4863a;       /* Accent okergeel */
  /* Steunkleur "rising sun": helder okergeel. Alleen fijne lijnen, hover/focus-details.
     Contrast: 6.7:1 op --ink, ~5.6:1 op donkere foto-veil, 2.0:1 op --bg (dus niet voor tekst
     of functionele lijnen op papier; daar alleen als zachte tint). Nooit op grote vlakken. */
  --c-sun: #e3a136;
  /* Kaderlijn 1px: rust = bijna onzichtbaar, hover = lichte zon-tint (zelfde timing als radius) */
  --frame-stroke: color-mix(in srgb, var(--ink) 7%, transparent);
  --frame-stroke-hover: color-mix(in srgb, var(--c-sun) 55%, transparent);
  --brand-metal: #2a2620;  /* logo / UI donker */

  --shadow: 0 18px 40px rgba(42, 38, 32, 0.09);
  --chrome: rgba(246, 242, 234, 0.94);
  --hero-veil: linear-gradient(115deg, rgba(42, 38, 32, 0.28), rgba(42, 38, 32, 0.06));
  --white: #f8f3ea;
  --logo-fill: var(--white);
  --radius: 7px;
  --radius-hover: 10px;
  --elev: var(--bg-elev);

  --chrome-h: 65px;        /* was 66px: 1px lager (design-20261023) */

  /* AE-easing: outgoing influence 22% (x1), incoming influence 79% (x2 = 1 - 0.79).
     Standaard voor tekst- en UI-beweging site-breed. */
  --ease-ae: cubic-bezier(0.22, 0, 0.21, 1);
  --line-stagger: 60ms;    /* tekst: sequentie per regel */
  --chrome-pad-x: clamp(28px, 4vw, 56px);
  --page-pad-x: clamp(28px, 4vw, 56px);
  --section-pad-y: clamp(40px, 5vw, 72px);
}