/*
  Kers Advies — design tokens
  Colors pixel-sampled from the real logo (assets/img/logo.png):
    green  #007034 (rounds to the site's own declared #006f34)
    maroon #6a0a10 (exact match to the site's own declared secondary)
    accent #259b28 (site's own declared link-hover green)
  Ink/body derived as shades of the site's own applied text color (#4a4a4a),
  never invented from scratch.
*/

:root {
  /* ---- Brand (sampled / verified) ---- */
  --color-green: #006f34;
  --color-green-dark: #00471f;
  --color-maroon: #6a0a10;
  --color-maroon-dark: #47070a;
  --color-accent: #259b28;

  /* ---- Neutrals (derived as tints/shades of the verified palette) ---- */
  --color-ink: #2a2622;          /* headings — darkened shade of body base, warmed toward maroon */
  --color-body: #4a4a4a;         /* verified real applied body-text color */
  --color-body-soft: #6b6660;
  --color-cream: #faf6ee;        /* warm ivory background */
  --color-cream-raised: #ffffff;
  --color-stone: #efe7d8;        /* soft neutral secondary surface */
  --color-stone-line: #e2d8c4;   /* thin rule / border tone */
  --color-white: #ffffff;

  /* ---- Semantic ---- */
  --color-bg: var(--color-cream);
  --color-surface: var(--color-cream-raised);
  --color-surface-alt: var(--color-stone);
  --color-border: var(--color-stone-line);
  --color-text: var(--color-body);
  --color-heading: var(--color-ink);
  --color-cta-bg: var(--color-maroon);
  --color-cta-bg-hover: var(--color-maroon-dark);
  --color-cta-text: var(--color-white);
  --color-link: var(--color-green);
  --color-link-hover: var(--color-accent);
  --color-focus: var(--color-accent);

  /* ---- Typography ---- */
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Source Sans 3", "Segoe UI", Helvetica, sans-serif;

  --fs-h1: clamp(2.375rem, 1.9rem + 2.2vw, 4.375rem);   /* ~38px -> 70px */
  --fs-h2: clamp(1.75rem, 1.55rem + 0.9vw, 2.75rem);
  --fs-h3: clamp(1.375rem, 1.25rem + 0.5vw, 1.75rem);
  --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.8125rem;

  --lh-heading: 1.18;
  --lh-body: 1.65;

  /* ---- Spacing scale (4/8 rhythm) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 5.5rem;
  --space-10: 7.5rem;

  /* ---- Shape ---- */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* ---- Shadow (minimal, editorial — not heavy SaaS elevation) ---- */
  --shadow-sm: 0 1px 2px rgba(42, 38, 34, 0.06);
  --shadow-md: 0 8px 24px rgba(42, 38, 34, 0.08);
  --shadow-header: 0 1px 0 rgba(42, 38, 34, 0.08);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-slow: 550ms;

  /* ---- Layout ---- */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-height: 76px;
}