/* De Babybasis
   Profiel zand met roze. Bewust een lichte wereld, ook als het toestel op donker
   staat: dit merk hoort licht te zijn en een omgekeerde variant maakt het koud.
   Alles is voor de telefoon geschreven. Grotere schermen krijgen daarna wat lucht. */

:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  /* grond */
  --bg:        #F8F2EA;
  --card:      #FFFDFA;
  --blush:     #F6E7E3;
  --sand:      #F2E8DA;
  /* inkt */
  --ink:       #3A3029;
  --soft:      #7B6D60;
  --faint:     #B2A495;
  --line:      #EBE0D1;
  /* accent */
  --rose:      #B87C79;
  --rose-deep: #9C5A55;
  --caramel:   #B08968;
  --wash1: rgba(184, 124, 121, .22);
  --wash2: rgba(176, 137, 104, .18);
  /* vorm */
  --r:    22px;
  --r-sm: 16px;
  --shadow: 0 2px 3px rgba(58,48,41,.02), 0 16px 40px -30px rgba(58,48,41,.4);
  --display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --ui: Corbel, Candara, "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --track: .2em;
  /* De marge links en rechts. Op een telefoon smaller, want daar telt elke pixel. */
  --kant: 20px;
  /* iPhone laat onderin ruimte voor de balk */
  --veilig-onder: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 560px) { :root { --kant: 26px; } }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  -webkit-tap-highlight-color: rgba(184,124,121,.12);
}

/* Alleen de zijkanten, als losse eigenschap. Met de korte schrijfwijze padding
   overschrijft elke klasse die er later bij op hetzelfde element staat de marge
   links en rechts weer naar nul, en dan plakt de tekst tegen de rand. */
.inner { width: 100%; max-width: 660px; margin: 0 auto; padding-inline: var(--kant); }

h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(44px, 13vw, 84px); line-height: .98; }
h2 { font-size: clamp(27px, 7vw, 40px); line-height: 1.1; }
h3 { font-size: 21px; line-height: 1.25; }
h1 em, h2 em { font-style: italic; color: var(--rose); }
p { margin: 0; }

a { color: var(--rose-deep); text-underline-offset: .2em; }

.eyebrow {
  font-size: 10.5px; letter-spacing: var(--track); text-transform: uppercase;
  color: var(--faint); margin: 0;
}

/* ── knoppen ─────────────────────────────────────────────
   Minstens 52 pixels hoog, want dat is wat een duim nodig heeft. */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border: 0; border-radius: 100px;
  background: var(--rose); color: #FFF9F6;
  font-family: var(--ui); font-size: 16.5px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(156,90,85,.75);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.knop:hover { background: var(--rose-deep); }
.knop:active { transform: translateY(1px); }
.knop.stil {
  background: transparent; color: var(--soft); box-shadow: none;
  border: 1px solid var(--line); font-weight: 500;
}
.knop.stil:hover { background: var(--card); color: var(--ink); }
.knop.breed { width: 100%; }

:focus-visible { outline: 2px solid var(--rose-deep); outline-offset: 3px; border-radius: 8px; }

/* ── kaarten en lijsten ── */
.kaart {
  background: var(--card); border-radius: var(--r); padding: 26px 22px;
  box-shadow: var(--shadow);
}

.strip {
  background: var(--blush); color: var(--rose-deep); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
  padding: 9px 18px; line-height: 1.5;
}

.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .knop { transition: none; }
}

/* ── voet ── */
.voet {
  border-top: 1px solid var(--line); margin-top: 56px; padding: 24px 0 calc(34px + var(--veilig-onder));
  font-size: 12.5px; color: var(--faint); line-height: 1.65; text-align: center;
  display: flex; flex-direction: column; gap: 8px;
}