/* ==========================================================================
   Design tokens — boeken.jasperalblas.nl
   Vastgelegd 5 aug 2026 (variant A+, aangescherpt volgens JA Brand Book)
   Kern: navy = autoriteit & actie (knoppen), mint = spaarzaam accent (5-10%),
   Graphik Regular voor grote koppen, links uitgelijnd, veel rust.
   ========================================================================== */

@font-face { font-family: "Graphik"; src: url("../fonts/Graphik-Light-Web.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("../fonts/Graphik-Regular-Web.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Graphik"; src: url("../fonts/Graphik-Semibold-Web.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* kleuren */
  --navy: #2A3F52;          /* Deep Blue — koppen, tekst, primaire knoppen */
  --navy-hover: #1F3040;
  --ink: #2A292F;           /* bodytekst op wit */
  --mint: #00C7A9;          /* Light Green — accenten, vinkjes, eyebrow */
  --mint-dark: #00A98F;     /* accent op lichte vlakken (betere leesbaarheid) */
  --mint-licht: #8FE8D5;    /* accent op navy vlakken */
  --canvas: #F7F5F0;        /* Warm Canvas — afwisselende sectievlakken */
  --cream: #F5F1EA;         /* site-crème, beeldvlakken */
  --wit: #FFFFFF;
  --grijs: #6B7280;         /* bijschriften, sublines */
  --lijn: #E2DDD2;          /* randen op canvas */
  --lijn-wit: #E8ECEB;      /* randen op wit */

  /* typografie (Graphik; Roboto-fallback conform site) */
  --sans: "Graphik", "Roboto", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* schaal (desktop → mobiel via clamp); max 3 gewichten per pagina: 400, 600, (300 alleen groot) */
  --fs-display: clamp(30px, 4.2vw, 52px);   /* hero-kop, weight 400 */
  --fs-h2: clamp(28px, 3.2vw, 38px);        /* sectiekoppen, weight 400 */
  --fs-h3: clamp(20px, 2.2vw, 24px);        /* subkoppen, weight 600 */
  --fs-intro: 19px;                          /* intro-alinea's */
  --fs-body: 17.5px;                         /* bodytekst */
  --fs-klein: 14px;                          /* sublines, bijschriften */
  --fs-eyebrow: 12px;                        /* labels, weight 600, uppercase, ls 3px */
  --lh-body: 1.65;

  /* maat & ruimte */
  --breed: 1180px;          /* brede secties (hero, grids) */
  --smal: 680px;            /* leeskolom proza */
  --sectie-v: clamp(56px, 9vw, 120px);      /* verticale sectie-padding */
  --radius: 8px;
  --radius-kaart: 10px;
}

/* ===== basis ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); background: var(--wit); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }

h1, h2 { font-weight: 400; color: var(--navy); letter-spacing: -0.5px; }
h1 { font-size: var(--fs-display); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.18; }
h3 { font-size: var(--fs-h3); font-weight: 600; color: var(--navy); line-height: 1.3; }

.eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--mint-dark); }

/* ===== lay-out ===== */
.sectie { padding: var(--sectie-v) 24px; }
.sectie-canvas { background: var(--canvas); }
.sectie-navy { background: var(--navy); color: #fff; }
.kolom-breed { max-width: var(--breed); margin: 0 auto; }
.kolom-smal { max-width: var(--smal); margin: 0 auto; }

/* ===== knoppen ===== */
.btn { display: inline-block; font-family: var(--sans); font-weight: 600; text-decoration: none; text-align: center;
       border-radius: var(--radius); cursor: pointer; border: none; }
.btn-primair { background: var(--navy); color: #fff; font-size: 18px; padding: 17px 36px; }
.btn-primair:hover { background: var(--navy-hover); }
.btn-secundair { background: var(--wit); color: var(--navy); font-size: 16px; padding: 13px 26px; border: 2px solid var(--navy); }
.btn-secundair:hover { background: var(--canvas); }
.btn-sub { font-size: 13.5px; color: var(--grijs); margin-top: 10px; }

/* ===== chips ===== */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-size: 14.5px; font-weight: 500; padding: 8px 14px; border-radius: var(--radius); white-space: nowrap;
        background: var(--wit); color: var(--navy); border: 1px solid var(--lijn); }
.chip::before { content: "✓ "; color: var(--mint-dark); font-weight: 700; }

/* ===== proza ===== */
.proza p { margin-bottom: 1.35em; }
.proza p:last-child { margin-bottom: 0; }
.proza .intro { font-size: var(--fs-intro); color: var(--navy); }
.proza strong { color: var(--navy); }

/* uitgelicht slot-statement in een prozasectie */
.kernpunt { border-left: 3px solid var(--mint); padding: 4px 0 4px 22px; margin: 1.6em 0 0; }
.kernpunt p { font-weight: 600; color: var(--navy); margin: 0; }