/* ==========================================================================
   Design-tokens Mapamax
   Afgeleid uit de welkomstboekjes, niet verzonnen. Zie docs/DESIGN.md.
   ========================================================================== */

@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/static/fonts/Poppins-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/Inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/Inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Parisienne';
  src: url('/static/fonts/Parisienne-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Basis, geldt overal --- */
  --wit: #ffffff;
  --inkt: #14120f;          /* koppen, iets warmer dan puur zwart */
  --inkt-zacht: #3d3833;    /* lopende tekst, rustiger op een scherm */
  --inkt-licht: #7a736b;    /* bijschriften, afstanden, labels */
  --lijn: #e2ddd5;          /* de dunne scheidingslijnen uit het drukwerk */

  /* --- Accent per pand ---
     De boekjes gebruiken de accentkleur verschillend: bij Le Rosa is het een
     lichte vlakvulling met zwarte tekst, bij Le Simone een donkere met witte.
     Daarom niet alleen een kleur maar ook de bijbehorende tekstkleur. */
  --vlak: #ebe2d6;
  --vlak-tekst: var(--inkt);
  --tint: #faf7f2;          /* zachte sectie-achtergrond */
  --diep: #c9b79c;          /* randen en kleine accenten */

  /* --- Ritme ---
     Eén schaal voor de hele site. De boekjes ademen, de site mag niet voller. */
  --ruimte-xs: 0.5rem;
  --ruimte-s: 1rem;
  --ruimte-m: 2rem;
  --ruimte-l: 4rem;
  --ruimte-xl: 7rem;
  --ruimte-xxl: 11rem;

  --breedte: 1240px;
  --breedte-tekst: 62ch;

  /* --- Typografie --- */
  --font-kop: 'Poppins', system-ui, sans-serif;
  --font-tekst: 'Inter', system-ui, -apple-system, sans-serif;
  --font-sier: 'Parisienne', cursive;

  /* Vloeiende schaal, zodat er geen sprongen zitten tussen telefoon en scherm */
  --tekst-xs: 0.78rem;
  --tekst-s: 0.88rem;
  --tekst-m: 1rem;
  --tekst-l: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --kop-s: clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --kop-m: clamp(1.8rem, 1.3rem + 2.2vw, 3rem);
  --kop-l: clamp(2.4rem, 1.4rem + 4.4vw, 5rem);
  --sier-m: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  --sier-l: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);

  /* Kapitalen hebben lucht nodig, precies zoals in het drukwerk */
  --spatie-kop: 0.055em;
  --spatie-label: 0.16em;

  /* --- Vorm ---
     De enige twee rondingen die de boekjes kennen: een boog en een cirkel.
     Bewust geen algemene border-radius van 8px, dat is de standaardlook van
     elke gegenereerde site. */
  --boog: 50% 50% 0 0 / 26% 26% 0 0;
  --boog-vol: 50vw 50vw 0 0 / 20rem 20rem 0 0;

  --overgang: 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Le Rosa: zee, duinen, warm zand */
[data-pand='rosa'] {
  --vlak: #ebe2d6;
  --vlak-tekst: var(--inkt);
  --tint: #faf7f2;
  --diep: #c9b79c;
}

/* Le Simone: bergen, sneeuw, leisteen. Donker vlak, witte tekst erop. */
[data-pand='simone'] {
  --vlak: #5d6f80;
  --vlak-tekst: #ffffff;
  --tint: #f1f4f6;
  --diep: #8fa3b3;
}