/* =========================================================================
   Vakantie in Curaçao — variant "Claude Design" · Hòfi Tropikal
   Tropisch-botanisch design system: diep loofgroen canvas, hibiscusrood
   bloemaccent, zandwit-ivoor lichte secties, grote organische bladvormen.
   Typografie: Young Serif (display) + Figtree (tekst).
   Deze tokens zijn 1-op-1 de bron voor de site (variant-cd/site/css/style.css
   importeert exact dit bestand).
   ========================================================================= */

:root {
  /* ---------- Loof (groen-familie, de basis) ---------- */
  --loof-950: #0b241a;   /* diepste loofgroen, footer      */
  --loof-900: #0f2e21;   /* donker canvas, hero            */
  --loof-800: #17402e;   /* panelen op donker              */
  --loof-700: #205640;   /* hover-donker                   */
  --loof-500: #3d7a58;   /* palm-middengroen               */
  --loof-300: #8db89b;   /* salie, zachte accenten         */
  --loof-150: #d3e2d2;   /* bladschaduw op licht           */
  --loof-100: #e6eee2;   /* lichtste groentint             */

  /* ---------- Hibiscus (bloemaccent, spaarzaam) ---------- */
  --hibiscus-600: #c22b3b;  /* basisaccent: hibiscusrood     */
  --hibiscus-700: #9e1f2f;  /* hover / diepe variant         */
  --hibiscus-100: #f7dfd8;  /* bloemtint als vlak            */

  /* ---------- Zand & ivoor (lichte secties) ---------- */
  --ivoor:    #f9f5eb;   /* basis licht                     */
  --zand-100: #f1e9d8;   /* verdiepte lichte vlakken        */
  --zand-200: #e5d9c0;   /* randen van zandvlakken          */

  /* ---------- Inkt ---------- */
  --inkt:      #182b21;  /* tekst op licht (groene inkt)    */
  --inkt-zacht:#4c6156;  /* secundaire tekst op licht       */
  --schuim:    #f4f8ef;  /* tekst op donker                 */
  --schuim-zacht: rgba(244, 248, 239, 0.72);

  /* ---------- Lijnen ---------- */
  --lijn:        rgba(24, 43, 33, 0.16);
  --lijn-zacht:  rgba(24, 43, 33, 0.09);
  --lijn-donker: rgba(244, 248, 239, 0.18);

  /* ---------- Typografie ---------- */
  --font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --font-tekst:   "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --maat-display: clamp(2.4rem, 5.4vw, 4.1rem);
  --maat-kop:     clamp(1.7rem, 3.2vw, 2.5rem);
  --maat-subkop:  clamp(1.2rem, 1.8vw, 1.45rem);
  --maat-tekst:   1.045rem;
  --maat-klein:   0.86rem;

  /* ---------- Organische vormtaal ---------- */
  /* Blad: één hoek loopt uit in een punt — dé signatuurvorm.  */
  --radius-blad:        2.25rem 2.25rem 2.25rem 0.35rem;
  --radius-blad-spiegel:2.25rem 0.35rem 2.25rem 2.25rem;
  --radius-blad-groot:  38% 62% 55% 45% / 45% 48% 52% 55%;  /* organische fotomask */
  --radius-knop:        999px 999px 999px 8px;
  --radius-veld:        0.9rem;

  /* ---------- Diepte ---------- */
  --schaduw-blad: 0 1px 0 rgba(24, 43, 33, 0.04), 0 22px 44px -22px rgba(15, 46, 33, 0.38);
  --schaduw-zweef:0 2px 0 rgba(24, 43, 33, 0.05), 0 34px 64px -26px rgba(15, 46, 33, 0.5);

  /* ---------- Ritme ---------- */
  --sectie-y: clamp(4.5rem, 9vw, 7.5rem);
  --kolom:    72rem;
}

/* ---------- Fonts (self-hosted, latin) ---------- */
@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/young-serif-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
  src: url("../fonts/figtree-italic.woff2") format("woff2");
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ivoor);
  color: var(--inkt);
  font-family: var(--font-tekst);
  font-size: var(--maat-tekst);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--hibiscus-600); color: var(--schuim); }

/* ---------- Display & koppen ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--maat-display);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}
.kop {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--maat-kop);
  line-height: 1.14;
  letter-spacing: -0.008em;
  text-wrap: balance;
  margin: 0;
}
.subkop {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--maat-subkop);
  line-height: 1.3;
  margin: 0;
}

/* Kicker: botanische etiketstijl boven elke sectiekop */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hibiscus-600);
}
.kicker::before {
  content: "";
  width: 1.7rem; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.op-donker .kicker { color: var(--loof-300); }

/* Accentwoord in een kop: hibiscus + tekst-italic van Figtree niet gebruiken
   in koppen — accent is kleur, geen stijlbreuk. */
.accent { color: var(--hibiscus-600); }
.op-donker .accent { color: var(--loof-300); }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radius-knop);
  border: 1px solid transparent;
  font-family: var(--font-tekst);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.knop-hibiscus { background: var(--hibiscus-600); color: var(--schuim); box-shadow: var(--schaduw-blad); }
.knop-hibiscus:hover { background: var(--hibiscus-700); transform: translateY(-2px); box-shadow: var(--schaduw-zweef); }
.knop-loof { background: var(--loof-800); color: var(--schuim); }
.knop-loof:hover { background: var(--loof-700); transform: translateY(-2px); }
.knop-omlijnd { background: transparent; color: var(--inkt); border-color: var(--lijn); }
.knop-omlijnd:hover { border-color: var(--inkt); transform: translateY(-2px); }
.op-donker .knop-omlijnd { color: var(--schuim); border-color: var(--lijn-donker); }
.op-donker .knop-omlijnd:hover { border-color: var(--schuim); }

/* ---------- Kaarten ---------- */
.kaart {
  background: #fffdf7;
  border: 1px solid var(--lijn-zacht);
  border-radius: var(--radius-blad);
  box-shadow: var(--schaduw-blad);
  overflow: hidden;
}
.kaart-spiegel { border-radius: var(--radius-blad-spiegel); }
.kaart-zand  { background: var(--zand-100); border-color: var(--zand-200); box-shadow: none; }
.kaart-donker{ background: var(--loof-800); border-color: var(--lijn-donker); color: var(--schuim); }

/* Fotolijst: organische bladmask voor sfeerfoto's */
.foto-blad { border-radius: var(--radius-blad); overflow: hidden; }
.foto-blad-spiegel { border-radius: var(--radius-blad-spiegel); overflow: hidden; }
.foto-organisch { border-radius: var(--radius-blad-groot); overflow: hidden; }
.foto-blad img, .foto-blad-spiegel img, .foto-organisch img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}

/* ---------- Tarieventabel ---------- */
.tarieven { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tarieven caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.15rem;
  padding-bottom: 0.8rem;
}
.tarieven th, .tarieven td { padding: 0.85rem 1rem; text-align: left; }
.tarieven thead th {
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  border-bottom: 2px solid var(--inkt);
}
.tarieven tbody tr { border-bottom: 1px solid var(--lijn-zacht); }
.tarieven tbody tr:last-child { border-bottom: 0; }
.tarieven td.prijs { font-weight: 700; text-align: right; white-space: nowrap; }
.tarieven tbody tr:hover { background: var(--loof-100); }

/* ---------- Citaat (gastenreactie) ---------- */
.citaat {
  font-family: var(--font-tekst);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
}
.citaat-bron {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  font-style: normal;
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.citaat-bron::before { content: ""; width: 1.2rem; height: 2px; background: var(--hibiscus-600); }

/* ---------- Feitenlijst (voorzieningen) ---------- */
.feiten { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.feiten li { padding-left: 1.55rem; position: relative; }
.feiten li::before {
  /* bladnerf-vinkje */
  content: "";
  position: absolute; left: 0; top: 0.52em;
  width: 0.72rem; height: 0.72rem;
  background: var(--loof-500);
  border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
}

/* ---------- Etiket / badge ---------- */
.etiket {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.32rem 0.85rem;
  border-radius: 999px;
  background: var(--loof-100);
  color: var(--loof-700);
  font-size: var(--maat-klein);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.etiket-hibiscus { background: var(--hibiscus-100); color: var(--hibiscus-700); }
.etiket-donker { background: rgba(244, 248, 239, 0.12); color: var(--schuim); }

/* ---------- Secties ---------- */
.sectie { padding: var(--sectie-y) 1.5rem; }
.sectie-donker { background: var(--loof-900); color: var(--schuim); }
.sectie-zand { background: var(--zand-100); }
.kolom { max-width: var(--kolom); margin: 0 auto; }

/* ---------- Motion (subtiel, altijd achter reduced-motion-gate) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .zweefblad { animation: bladzweef 11s ease-in-out infinite; transform-origin: 20% 90%; }
  .zweefblad-traag { animation: bladzweef 16s ease-in-out infinite reverse; transform-origin: 80% 10%; }
  @keyframes bladzweef {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    50%      { transform: rotate(2.4deg) translateY(-7px); }
  }
  .onthul { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
  .onthul.zichtbaar { opacity: 1; transform: none; }
}