/* ============================================
   LET'S BEE SOCIAL — UTILITY CSS
   Plak in je stylesheet en gebruik via class=""
   ============================================ */

:root {
  /* Kleuren */
  --lbs-honey:       #F5C518;   /* primair geel */
  --lbs-honey-deep:  #E0A815;   /* amber */
  --lbs-ink:         #1A1812;   /* near-black */
  --lbs-cream:       #FAF6EC;   /* warme crème */
  --lbs-bg:          #FDFBF4;   /* page background */
  --lbs-muted:       #6B6558;   /* secundaire tekst */
  --lbs-border:      #E8E2D2;

  /* Schaduwen */
  --lbs-shadow-soft: 0 1px 2px rgba(20,18,10,.04), 0 8px 24px -8px rgba(20,18,10,.08);
  --lbs-shadow-glow: 0 10px 40px -10px rgba(245,197,24,.55);

  /* Radius */
  --lbs-radius:      16px;
  --lbs-radius-lg:   24px;
  --lbs-radius-2xl:  32px;
  --lbs-radius-pill: 999px;

  /* Fonts (laad via Google Fonts) */
  --lbs-font-display: "Fraunces", Georgia, serif;
  --lbs-font-sans:    "Plus Jakarta Sans", system-ui, sans-serif;
}

/* ---------- TYPOGRAFIE ---------- */
.lbs-h1 { font-family: var(--lbs-font-display); font-weight: 500; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--lbs-ink); }
.lbs-h2 { font-family: var(--lbs-font-display); font-weight: 500; font-size: clamp(2rem, 4vw, 3rem);   line-height: 1.1;  letter-spacing: -0.02em; color: var(--lbs-ink); }
.lbs-h3 { font-family: var(--lbs-font-display); font-weight: 500; font-size: 1.5rem;  line-height: 1.2;  letter-spacing: -0.02em; color: var(--lbs-ink); }
.lbs-h4 { font-family: var(--lbs-font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.3;  letter-spacing: -0.02em; color: var(--lbs-ink); }

.lbs-lead    { font-family: var(--lbs-font-sans); font-size: 1.125rem; line-height: 1.6; color: var(--lbs-muted); }
.lbs-body    { font-family: var(--lbs-font-sans); font-size: 1rem;     line-height: 1.6; color: var(--lbs-ink); }
.lbs-small   { font-family: var(--lbs-font-sans); font-size: 0.875rem; line-height: 1.5; color: var(--lbs-muted); }
.lbs-italic-accent { font-style: italic; color: var(--lbs-honey); }

/* Eyebrow (klein label boven titel) */
.lbs-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 4px 12px;
  border-radius: var(--lbs-radius-pill);
  background: rgba(245,197,24,0.25);
  color: var(--lbs-ink);
  font-family: var(--lbs-font-sans);
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---------- BUTTONS ---------- */
.lbs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px;
  border-radius: var(--lbs-radius-pill);
  font-family: var(--lbs-font-sans);
  font-size: 0.875rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: all .2s ease;
}

.lbs-btn-primary {
  background: var(--lbs-honey);
  color: var(--lbs-ink);
  box-shadow: var(--lbs-shadow-glow);
}
.lbs-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }

.lbs-btn-ghost {
  background: transparent;
  color: var(--lbs-ink);
  border-color: var(--lbs-border);
}
.lbs-btn-ghost:hover { background: var(--lbs-cream); }

.lbs-btn-dark {
  background: var(--lbs-ink);
  color: var(--lbs-cream);
}
.lbs-btn-dark:hover { background: #000; }

.lbs-btn-outline-light {
  background: transparent;
  color: var(--lbs-cream);
  border-color: rgba(255,255,255,0.2);
}
.lbs-btn-outline-light:hover { background: rgba(255,255,255,0.1); }

/* ---------- LAYOUT ---------- */
.lbs-container { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .lbs-container { padding: 0 32px; } }

.lbs-section       { padding: 80px 0; }
@media (min-width: 640px) { .lbs-section { padding: 112px 0; } }

/* ---------- CARDS ---------- */
.lbs-card {
  background: #fff;
  border: 1px solid var(--lbs-border);
  border-radius: var(--lbs-radius-2xl);
  padding: 32px;
  box-shadow: var(--lbs-shadow-soft);
}

.lbs-card-dark {
  background: var(--lbs-ink);
  color: var(--lbs-cream);
  border-radius: var(--lbs-radius-2xl);
  padding: 32px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.35);
}

/* ---------- BACKGROUNDS / SECTIES ---------- */
.lbs-bg-cream  { background: var(--lbs-cream); }
.lbs-bg-ink    { background: var(--lbs-ink); color: var(--lbs-cream); }
.lbs-bg-honey  { background: var(--lbs-honey); color: var(--lbs-ink); }

.lbs-gradient-honey {
  background: linear-gradient(135deg, var(--lbs-honey) 0%, var(--lbs-honey-deep) 100%);
}

/* ---------- LINKS ---------- */
.lbs-link {
  color: var(--lbs-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--lbs-honey);
}
.lbs-link:hover { text-decoration-thickness: 2px; }