/* Menara — design tokens. Alleen brandkleuren en fonts wijken af van de basis. */
:root{
  /* Brand — koper/saffraan uit het uithangbord, zellige-groen als tweede accent */
  --brand-500:#9c4315;   /* knoppen, links (7.0:1 op --bg) */
  --brand-600:#7d350f;   /* hover */
  --brand-100:#f6e7d8;   /* zachte vullingen */
  --gold:#a87524;        /* decoratief: lijnen, sterren */
  --zellige:#12564c;     /* tweede accent */

  /* Neutralen — warme, licht bruin-getinte ramp */
  --bg:#faf5ec;
  --surface:#f2e8d8;
  --border:#e0d0b6;
  --text:#1c1512;        /* ~16:1 op --bg */
  --text-soft:#5b463a;   /* ~7.4:1 op --bg */
  --ink:#16100c;         /* donkere secties */
  --ink-2:#221812;
  --on-ink:#f7ecdb;
  --on-ink-soft:#d8c3a5;

  /* Feedback */
  --ok:#0a6b42;
  --err:#a8261c;

  /* Spacing — 8px schaal */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem;  --sp-12:3rem;  --sp-16:4rem;
  --sp-24:6rem;  --sp-32:8rem;

  /* Type — vloeiend */
  --text-sm:clamp(.85rem,.82rem + .15vw,.95rem);
  --text-base:clamp(1rem,.96rem + .2vw,1.125rem);
  --text-lg:clamp(1.2rem,1.1rem + .5vw,1.4rem);
  --text-xl:clamp(1.5rem,1.3rem + 1vw,2rem);
  --text-2xl:clamp(2rem,1.6rem + 2vw,3rem);
  --text-3xl:clamp(2.5rem,1.9rem + 3vw,4rem);

  --font-display:"Amiri",Georgia,"Times New Roman",serif;
  --font-body:"Karla",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* Vorm */
  --radius:10px; --radius-sm:6px;
  --shadow:0 1px 2px rgba(28,21,18,.06),0 8px 24px rgba(28,21,18,.10);
  --container:1200px;
  --measure:65ch;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);
  font-size:var(--text-base);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;text-wrap:balance}
h1{font-size:var(--text-3xl)}
h2{font-size:var(--text-2xl)}
h3{font-size:var(--text-xl)}
p{max-width:var(--measure)}
img,picture,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--brand-500)}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--brand-500);outline-offset:2px}

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--sp-4)}
.section{padding-block:clamp(var(--sp-16),10vw,var(--sp-24))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;padding:var(--sp-3) var(--sp-6);border-radius:var(--radius);
  font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;
  font-family:var(--font-body);font-size:var(--text-base)}
.btn--primary{background:var(--brand-500);color:#fff}
.btn--primary:hover{background:var(--brand-600)}
.btn--secondary{background:transparent;color:var(--text);border-color:var(--border)}
.btn--secondary:hover{border-color:var(--brand-500);color:var(--brand-500)}
.btn--ghost{background:transparent;color:var(--on-ink);border-color:rgba(247,236,219,.45)}
.btn--ghost:hover{background:rgba(247,236,219,.12)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}