/* ============================================================
   DoekoeDoevoe — merkstijl (CSS custom properties + basisklassen)
   Lettertype: Fredoka (Google Fonts)
   Zie /images voor de bijbehorende logo-bestanden
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap');

:root {
  /* Kleuren */
  --dd-ink: #2A1720;         /* inkt — hoofdtekst, donkere achtergronden */
  --dd-accent: #E85D8A;      /* roze — primaire accentkleur */
  --dd-accent-alt: #E3A93D;  /* goud — alternatieve accentkleur */
  --dd-paper: #FFFDF8;       /* papier — lichte achtergronden, tekst op donker */
  --dd-bg: #F3EAEC;          /* zachte achtergrondtint voor kaarten/badges */

  /* Typografie */
  --dd-font: 'Fredoka', sans-serif;
}

/* ------------------------------------------------------------
   Basis
   ------------------------------------------------------------ */
.dd-root {
  font-family: var(--dd-font);
  color: var(--dd-ink);
  background: var(--dd-paper);
}

a.dd-link { color: var(--dd-accent); text-decoration: none; }
a.dd-link:hover { color: #D14676; }

/* ------------------------------------------------------------
   Wordmark (tekstuele "DoekoeDoevoe" — geen afbeelding nodig)
   Gebruik: <span class="dd-logo"><span class="dd-logo__doekoe">Doekoe</span><span class="dd-logo__doevoe">Doevoe</span></span>
   ------------------------------------------------------------ */
.dd-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--dd-font);
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.01em;
}
.dd-logo__doekoe { color: var(--dd-accent); }
.dd-logo__doevoe { color: var(--dd-ink); }

.dd-tagline {
  font-family: var(--dd-font);
  font-weight: 500;
  font-size: 1rem;
  color: var(--dd-ink);
  opacity: 0.6;
}

/* ------------------------------------------------------------
   DD-monogram (tekstuele badge — alternatief voor de PNG's
   images/dd-monogram-licht.png / dd-monogram-donker.png)
   Gebruik: <span class="dd-monogram"><span>D</span><span>D</span></span>
   Donkere variant: voeg class "dd-monogram--dark" toe
   ------------------------------------------------------------ */
.dd-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--dd-bg);
  font-family: var(--dd-font);
  font-weight: 700;
  font-size: 2.25rem;
  letter-spacing: -0.09em;
  line-height: 1;
}
.dd-monogram span:first-child { color: var(--dd-accent); }
.dd-monogram span:last-child  { color: var(--dd-ink); }

.dd-monogram--dark { background: var(--dd-ink); }
.dd-monogram--dark span:last-child { color: var(--dd-paper); }

/* ------------------------------------------------------------
   Logo-afbeeldingen (verwijzen naar /images)
   ------------------------------------------------------------ */
.dd-icon {
  width: 64px;
  height: 64px;
  background-image: url('images/icon-roze.png');
  background-size: contain;
  background-repeat: no-repeat;
}
.dd-icon--goud { background-image: url('images/icon-goud.png'); }

/* ------------------------------------------------------------
   Kleur-hulpklassen
   ------------------------------------------------------------ */
.dd-bg-ink   { background: var(--dd-ink);   color: var(--dd-paper); }
.dd-bg-paper { background: var(--dd-paper); color: var(--dd-ink); }
.dd-bg-soft  { background: var(--dd-bg);    color: var(--dd-ink); }
.dd-text-accent     { color: var(--dd-accent); }
.dd-text-accent-alt { color: var(--dd-accent-alt); }