/* ============================================================
   TOKENS.CSS — Branding-schema "Linnen gids"
   Eén centrale plek voor merkkleuren, typografie, spacing en
   vormgeving. Pas hier iets aan en het verandert site-breed.
   Volgorde: 1) merkkleuren  2) semantische kleur-aliassen
             3) typografie   4) ruimte/vorm/layout
   ============================================================ */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-var-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-var-latin-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

:root {

  /* 1) MERKKLEUREN — de knoppen waar je aan draait */
  --color-main1: #2f5d46;   /* diep groen — primaire actie / CTA */
  --color-main2: #243029;   /* inkt-groen — donker oppervlak / tekst */
  --color-main3: #b08d3f;   /* goud — accent, spaarzaam */
  --color-main1-hover: #b08d3f;
  --color-main3-soft: #e8dcc0;

  --color-surface:      #f7f4ed;  /* linnen — paginavlak */
  --color-surface-deep: #efe9dd;  /* verdiept vlak */
  --color-surface-card: #fffdf8;  /* kaarten */
  --color-line:         #d8d2c2;  /* hairlines / randen */
  --color-ink:          #243029;  /* hoofdtekst */
  --color-ink-soft:     #51604f;  /* secundaire tekst */
  --color-on-dark:      #cfd6cb;  /* tekst op donkere vlakken */
  --color-on-dark-soft: #8fa089;

  --color-danger:  #9a3b2e;   /* fouten / urgent */
  --color-success: #2f5d46;

  /* 2) SEMANTISCHE ALIASSEN — gebruik deze in componenten.
        Hangen aan de merkkleuren hierboven, dus één wijziging
        daar werkt overal door. */
  --color-primary:        var(--color-main1);
  --color-primary-hover:  var(--color-main1-hover);
  --color-accent:         var(--color-main3);
  --color-accent-soft:    var(--color-main3-soft);
  --color-text:           var(--color-ink);
  --color-text-muted:     var(--color-ink-soft);
  --color-focus:          var(--color-main3);

  /* Legacy-aliassen (bestaande componenten gebruiken deze namen) */
  --ink:        var(--color-ink);
  --ink-soft:   var(--color-ink-soft);
  --paper:      var(--color-surface);
  --paper-deep: var(--color-surface-deep);
  --card:       var(--color-surface-card);
  --line:       var(--color-line);
  --gold:       var(--color-main3);
  --gold-soft:  var(--color-main3-soft);
  --cta:        var(--color-main1);
  --cta-hover:  var(--color-main1-hover);
  --focus:      var(--color-main3);
  --urgent:     var(--color-danger);

  /* 3) TYPOGRAFIE */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;

  --text-body:    18px;     /* basis bodytekst */
  --text-reading: 19px;     /* artikel/leesteksten */
  --leading-body: 1.65;
  --leading-reading: 1.7;

  --text-sm:  0.92rem;
  --text-xs:  0.82rem;
  --text-lg:  1.12rem;
  --text-xl:  1.28rem;

  /* Koppen — gedeelde eigenschappen */
  --heading-font:    var(--font-display);
  --heading-weight:  500;
  --heading-leading: 1.15;
  --heading-tracking: -0.02em;

  /* Koppen — formaten (document-niveau) */
  --h1-size: clamp(2.0rem, 4.2vw, 3.0rem);
  --h2-size: clamp(1.6rem, 3.0vw, 2.1rem);
  --h3-size: 1.3rem;
  --h4-size: 1.1rem;

  /* Display — grote sier-koppen (hero / sectietitel) */
  --display-1: clamp(2.3rem, 5vw, 3.7rem);
  --display-1-leading: 1.08;
  --display-1-tracking: -0.025em;
  --display-2: clamp(1.7rem, 3vw, 2.35rem);

  /* Kicker / eyebrow (kleine bovenkop) */
  --kicker-size: 0.8rem;
  --kicker-tracking: 0.16em;
  --kicker-weight: 700;

  /* 4) RUIMTE, VORM & LAYOUT */
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 80px;
  --space-section: clamp(36px, 9vw, 66px);

  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --container: 1240px;
  --container-narrow: 760px;
  --gutter: 28px;

  --shadow-card: 0 1px 2px rgba(36,48,41,.05), 0 12px 36px -16px rgba(36,48,41,.18);
  --shadow-float: 0 1px 2px rgba(36,48,41,.05), 0 18px 44px -20px rgba(36,48,41,.3);

  --ring-focus: 3px solid var(--color-focus);
}