/* ===========================================================
   THE NEXT PLAN — Design tokens
   Extracted from current site (03-currentsite/) and existing brand.
   These three font families are FIXED — drukwerk is built on them.
   =========================================================== */

/* Fonts. Self-hosted i.p.v. Google Fonts CDN: identiek op Mac/Windows en
   geen bezoekers-IP naar Google (GDPR). De echte merk-fonts Harmony +
   Retro Signature staan self-hosted in tnp-editie.css. Montserrat (body)
   staat hieronder. Allura + Quicksand renderen nergens op de live
   design-editie-pagina's en zijn daarom niet meer geladen. */
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('../fonts/montserrat-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('../fonts/montserrat-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('../fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('../fonts/montserrat-700.woff2') format('woff2');
}

:root {
  /* ---------- COLOR ---------- */
  /* Surfaces */
  --tnp-cream:        #F4EDE3;   /* page background */
  --tnp-cream-soft:   #FBF7F0;   /* card / elevated surface */
  --tnp-cream-warm:   #ECE2D2;   /* alternating section bg */
  --tnp-hairline:     #E5DACB;   /* dividers, table rules */

  /* Brand accents */
  --tnp-taupe:        #9E8674;   /* primary button + accent */
  --tnp-taupe-deep:   #7B6857;   /* button hover, text on cream */
  --tnp-taupe-soft:   #B8A696;   /* tertiary, muted accent */

  /* Ink */
  --tnp-ink:          #2A2622;   /* body text, headings */
  --tnp-ink-soft:     #5A5048;   /* secondary copy */
  --tnp-ink-mute:     #8A7F75;   /* meta, captions */

  /* ---------- TYPE ---------- */
  --tnp-script:       'Harmony', 'Allura', 'Snell Roundhand', cursive;
  --tnp-display:      'Montserrat', system-ui, sans-serif;   /* logo + nav + button + eyebrows */
  --tnp-body:         'Montserrat', system-ui, sans-serif;   /* body — feedback ronde 2 (was Quicksand) */
  --tnp-heading:      var(--tnp-script);                      /* h1/h2/h3 — Harmony UPPERCASE — feedback ronde 2 */

  /* Type-scale — desktop */
  --tnp-fs-eyebrow:   0.75rem;     /* 12px caps */
  --tnp-fs-body:      1.0625rem;   /* 17px */
  --tnp-fs-lead:      1.25rem;     /* 20px */
  --tnp-fs-h3:        1.5rem;      /* 24px */
  --tnp-fs-h2:        2.5rem;      /* 40px */
  --tnp-fs-h1:        3.75rem;     /* 60px */
  --tnp-fs-script-l:  4.5rem;      /* 72px display script */
  --tnp-fs-script-m:  2.75rem;     /* 44px section script */

  /* Spacing rhythm — multiples of 8 */
  --tnp-s-1:  8px;
  --tnp-s-2:  16px;
  --tnp-s-3:  24px;
  --tnp-s-4:  32px;
  --tnp-s-5:  48px;
  --tnp-s-6:  64px;
  --tnp-s-7:  96px;
  --tnp-s-8:  128px;

  /* Layout */
  --tnp-maxw: 1240px;
  --tnp-gutter: 32px;

  /* Radii — soft-rounded, never pill except CTA */
  --tnp-r-sm: 4px;
  --tnp-r-md: 8px;
  --tnp-r-pill: 999px;
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

body {
  font-family: var(--tnp-body);
  font-weight: 400;
  font-size: var(--tnp-fs-body);
  line-height: 1.65;
  color: var(--tnp-ink);
  background: var(--tnp-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- TYPE PRIMITIVES ---------- */
.tnp-script  { font-family: var(--tnp-script); font-weight: 400; line-height: 1.05; }
.tnp-display { font-family: var(--tnp-display); }
.tnp-body    { font-family: var(--tnp-body); }

.tnp-eyebrow {
  font-family: var(--tnp-display);
  font-weight: 500;
  font-size: var(--tnp-fs-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--tnp-taupe-deep);
}

h1, h2, h3, h4 { font-family: var(--tnp-body); font-weight: 500; color: var(--tnp-ink); margin: 0; }

/* ---------- COMPONENTS ---------- */

/* Logo lockup */
.tnp-logo { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; gap: 2px; }
.tnp-logo .tnp-logo-mark {
  font-family: var(--tnp-display);
  font-weight: 400;
  letter-spacing: 0.32em;
  font-size: 0.95rem;
  color: var(--tnp-ink);
  text-transform: uppercase;
}
.tnp-logo .tnp-logo-sub {
  font-family: var(--tnp-script);
  font-size: 1.15rem;
  color: var(--tnp-taupe);
  margin-top: -2px;
  letter-spacing: 0.01em;
}

/* Buttons */
.tnp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--tnp-display);
  font-weight: 500;
  font-size: 0.8125rem;             /* 13px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: var(--tnp-r-pill);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.tnp-btn--primary   { background: var(--tnp-taupe); color: #FFF; }
.tnp-btn--primary:hover { background: var(--tnp-taupe-deep); }
.tnp-btn--ghost     { background: transparent; color: var(--tnp-ink); border-color: var(--tnp-ink); }
.tnp-btn--ghost:hover { background: var(--tnp-ink); color: var(--tnp-cream-soft); }
.tnp-btn--quiet     { background: transparent; color: var(--tnp-taupe-deep); padding: 14px 0; }
.tnp-btn--quiet:hover { color: var(--tnp-ink); }

/* Hairline rule */
.tnp-rule { height: 1px; background: var(--tnp-hairline); border: 0; }

/* Container */
.tnp-container { max-width: var(--tnp-maxw); margin: 0 auto; padding: 0 var(--tnp-gutter); }