/*
 * pify-theme.css — PifY platform-huisstijl v2 "ansichtkaart aan zee"
 * ──────────────────────────────────────────────────────────────────────────
 * Eén bron voor kleuren, letters en het logo van de reisapp.
 * Uitleg en regels: stitch/DESIGN.md. Tailwind-pagina's laden daarnaast
 * pify-theme.js, dat dezelfde waarden als Tailwind-tokens zet.
 *
 * Fonts (in de <head> van de pagina):
 * https://fonts.googleapis.com/css2?family=Syne:wght@800&family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&family=Caveat:wght@600&display=swap
 */

:root {
  /* Zee */
  --pify-diepzee: #083D53;     /* donkere vlakken, intro, afsluiting */
  --pify-atlantisch: #0B5D7A;  /* primair: koppen, knoppen, links */
  --pify-zee: #0E7DA3;         /* primair helder: knoppen, actief */
  --pify-lagune: #7FD3DB;      /* licht accent */
  /* Zon en bloem */
  --pify-zonlicht: #F5C842;    /* PifY-geel: hoofdknop, planeet, stickers */
  --pify-bougainville: #E2456B;/* pop-accent: stempels, labels (klein tekstgebruik: #D43D5E) */
  /* Licht */
  --pify-zeelucht: #F2F9FA;    /* achtergrond */
  --pify-schuim: #E0F2F4;      /* vlakken, chips */
  --pify-zand: #FFFDF8;        /* tekst op donker, kaartwit */
  --pify-inkt: #0E2A3B;        /* tekst */
  --pify-inkt-zacht: #46606E;  /* subtekst */

  --pify-font-logo: Syne, 'Bricolage Grotesque', sans-serif;
  --pify-font-kop: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --pify-font-tekst: 'DM Sans', system-ui, sans-serif;
  --pify-font-hand: Caveat, 'Segoe Print', cursive;

  --pify-schaduw: 0 18px 40px rgba(8, 61, 83, 0.10), 0 2px 6px rgba(8, 61, 83, 0.06);
  --pify-radius-kaart: 2rem;
}

/* Platformlogo: dotless ı met de gele planeet + ring (huisstijl §4).
   <span class="pify-logo" aria-label="PifY"><span aria-hidden="true">P</span><span class="pl-i" aria-hidden="true">ı<span class="pl-ball"></span><span class="pl-ring"></span></span><span aria-hidden="true">fY</span></span> */
.pify-logo { font-family: var(--pify-font-logo); font-weight: 800; letter-spacing: -0.02em; line-height: 1; display: inline-flex; align-items: flex-end; }
.pify-logo .pl-i { position: relative; display: inline-block; }
.pify-logo .pl-ball { position: absolute; left: 50%; top: -0.04em; width: 0.22em; height: 0.22em; border-radius: 50%; background: var(--pify-zonlicht); transform: translateX(-50%); }
.pify-logo .pl-ring { position: absolute; left: 50%; top: 0.035em; width: 0.385em; height: 0.114em; border: 0.03em solid var(--pify-zonlicht); border-radius: 50%; opacity: 0.5; transform: translateX(-50%) rotate(-28deg); }

/* Ansichtkaart-details */
.stamp { display: inline-flex; align-items: center; gap: .35em; padding: .3em .7em; border: 2px dashed currentColor; border-radius: 6px; transform: rotate(-3deg); }
.postcard-photo { background: #fff; padding: 8px 8px 0; }
.postcard-photo img { border-radius: 10px; }
.kiekje { background: #fff; padding: 6px 6px 22px; border-radius: 4px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.kiekje img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; display: block; }