/*
 * Famova thema bovenop Bootstrap 5.3. Geen compilatie nodig.
 * Lichte laag = logo en accenten zonder tekst. Donkere laag = knoppen, links, tekst in kleur.
 */
:root {
  --fv-terracotta: #E07A5F;
  --fv-teal:       #3D8B87;
  --fv-amber:      #E8A33D;
  --fv-klei:       #B4503A;
  --fv-dennen:     #2F6B4F;
  --fv-mosterd:    #C98A2B;
  --fv-kern:       #55504C;
  --fv-inkt:       #2E2A28;
  --fv-papier:     #F7F4F1;
  --fv-creme:      #FAF3EE;

  --bs-body-bg: var(--fv-papier);
  --bs-body-color: var(--fv-inkt);
  --bs-link-color: var(--fv-klei);
  --bs-link-hover-color: #9B3D2E;
  --bs-border-radius: .5rem;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

[data-bs-theme="dark"] {
  --fv-kern: #C9C4BF;
  --bs-body-bg: #1C1A19;
  --bs-body-color: #EDE8E3;
  --bs-link-color: var(--fv-terracotta);
  --bs-link-hover-color: #EFA48F;
}

/* Primaire knop: klei met witte tekst (5,1:1) */
.btn-primary {
  --bs-btn-bg: var(--fv-klei);
  --bs-btn-border-color: var(--fv-klei);
  --bs-btn-hover-bg: #9B3D2E;
  --bs-btn-hover-border-color: #9B3D2E;
  --bs-btn-active-bg: #8A3527;
  --bs-btn-active-border-color: #8A3527;
  --bs-btn-color: #fff;
  --bs-btn-focus-shadow-rgb: 180, 80, 58;
}

/* Tweede knop: dennen met witte tekst (6,9:1) */
.btn-secondary {
  --bs-btn-bg: var(--fv-dennen);
  --bs-btn-border-color: var(--fv-dennen);
  --bs-btn-hover-bg: #255640;
  --bs-btn-hover-border-color: #255640;
  --bs-btn-active-bg: #1E4634;
  --bs-btn-active-border-color: #1E4634;
  --bs-btn-color: #fff;
  --bs-btn-focus-shadow-rgb: 47, 107, 79;
}

.btn-outline-primary {
  --bs-btn-color: var(--fv-klei);
  --bs-btn-border-color: var(--fv-klei);
  --bs-btn-hover-bg: var(--fv-klei);
  --bs-btn-hover-border-color: var(--fv-klei);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--fv-klei);
  --bs-btn-active-color: #fff;
}

/* Accentkleuren zonder tekst: stippen, avatars, lijnen */
.fv-dot-terracotta { background: var(--fv-terracotta); }
.fv-dot-teal       { background: var(--fv-teal); }
.fv-dot-amber      { background: var(--fv-amber); }

.fv-avatar {
  width: 2rem; height: 2rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 500; color: #fff;
}
.fv-avatar.amber { color: #412402; }

/* Lichte badges met donkere tekst uit dezelfde familie */
.fv-badge-terracotta { background: #FBE6DF; color: #7A2E1E; }
.fv-badge-teal       { background: #DDEFEE; color: #1F4A48; }
.fv-badge-amber      { background: #FAEEDA; color: #633806; }

/* Woordmerk in de navigatie */
.fv-wordmark { font-weight: 500; letter-spacing: -.02em; color: var(--fv-terracotta); text-decoration: none; }

/* Veilige zones op telefoons met een notch, in standalone-modus */
@media (display-mode: standalone) {
  body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}