/* Design tokens — Moroccan Sweet House.
   Kleuren rechtstreeks uit het logo: crème achtergrond, chocoladebruin letterwerk,
   amber en honing uit de msemen-illustratie. */
:root {
  color-scheme: light;

  /* Brand */
  --brand-900: #3b1d07;   /* diepste bruin — donkere banden */
  --brand-700: #5a2d0c;   /* logo-letterwerk — koppen, tekst op crème */
  --brand-500: #9a4a0c;   /* links, primaire knoppen (wit erop ≥ 6:1) */
  --brand-600: #7d3c0a;   /* hover */
  --amber:     #e79937;   /* decoratief: lijnen, sterren, iconen — nooit voor tekst op crème */
  --honey:     #fec56e;   /* decoratief + tekst op donkerbruin */
  --brand-100: #fbe3bd;   /* tinten, zachte vlakken */

  /* WhatsApp-knop */
  --wa:       #0d7a3e;    /* wit erop ≈ 5.4:1 */
  --wa-hover: #0a6232;

  /* Neutrals */
  --bg:        #fff4de;   /* exact logo-achtergrond */
  --surface:   #fffaf0;
  --border:    #ecd6b3;
  --text:      #2e1a0c;   /* ≈ 15:1 op --bg */
  --text-soft: #6b4a30;   /* ≈ 7:1 op --bg */
  --on-dark:   #fff4de;
  --on-dark-soft: #f1d9b5;

  --ok:  #0d7a3e;
  --err: #b42318;

  /* Spacing — 8px scale */
  --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 — fluid */
  --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.4rem, 1.7rem + 3.4vw, 4.25rem);

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

  /* Shape */
  --radius:    16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(59,29,7,.06), 0 10px 30px rgba(59,29,7,.10);
  --shadow-lg: 0 2px 4px rgba(59,29,7,.08), 0 24px 60px rgba(59,29,7,.18);
  --container: 1200px;
  --measure: 65ch;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
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.12; text-wrap: balance; color: var(--brand-700); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: var(--text-3xl); letter-spacing: -.02em; }
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, summary):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), 9vw, var(--sp-24)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: var(--sp-3) var(--sp-6);
  border-radius: 999px; font: 600 var(--text-base)/1.2 var(--font-body); text-decoration: none;
  border: 2px solid transparent; cursor: pointer; transition: background .2s, transform .2s, border-color .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary   { background: var(--brand-500); color: #fff; }
.btn--primary:hover { background: var(--brand-600); }
.btn--wa        { background: var(--wa); color: #fff; }
.btn--wa:hover  { background: var(--wa-hover); }
.btn--secondary { background: transparent; color: var(--brand-700); border-color: var(--brand-700); }
.btn--secondary:hover { background: var(--brand-700); color: var(--on-dark); }
.btn svg { width: 1.25em; height: 1.25em; flex: none; }

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