/* ===========================================================
   Belle Slide — light theme
   Same design system as styles.css, inverted palette.
   =========================================================== */

@import url('styles.css');

:root{
  --bg: #f7f6f3;
  --bg-raised: #edece8;
  --line: rgba(20,20,20,.14);
  --ink: #161616;
  --ink-dim: rgba(22,22,22,.64);
  --ink-faint: rgba(22,22,22,.40);
}

/* logo & client strip are black artwork — no inversion needed on light bg */
.hero-logo,
.clients-strip img{
  filter: none;
}

.clients-strip img{
  opacity: .68;
}
.clients-strip img:hover{
  opacity: .9;
}

/* play button: light glass on light theme */
.play-btn{
  background: rgba(247,246,243,.78);
  border-color: rgba(20,20,20,.35);
}
.video-facade:hover .play-btn{
  background: rgba(247,246,243,.95);
  border-color: rgba(20,20,20,.7);
}

/* video poster sits on a light frame */
.video-frame{
  background: var(--bg-raised);
}

/* softer shadow for the slide mockup on light bg */
.slide-mock{
  box-shadow: 0 20px 55px rgba(20,20,20,.16);
}

/* slide-mock: light card on light theme */
.slide-mock{
  --slide-bg: #f6f5f2;
  --slide-ink: #1a1a1a;
  --slide-muted: #8a887f;
  --slide-line: #dbd9d2;
  --slide-dim: #cfcdc5;
}