/* ===========================
   Root Variables
   =========================== */
:root {
  --accent-color: #F4C430;
  --accent2-color: #FFE066;
  --accent3-color: #A0A0A0;
  --accent4-color: #072146;
  --primary-color: #0A1A2F;
  --dark-text-color: #0A1A2F;
  --gray-text-color: #A0A0A0;
  --button-padding-x: 16px;
  --button-padding-y: 8px;
  --font-family-body: 'Roboto', sans-serif;
  --light-text-color: #FFFFFF;
  --dark-border-color: #0A1A2F;
  --light-border-color: #E3E7ED;
  --font-family-heading: 'Poppins', sans-serif;
  --button-rounded-radius: 12px;
  --dark-background-color: #0A1A2F;
  --light-background-color: #E3E7ED;
  --medium-background-color: #C8D0DA;
  --primary-button-text-color: #FFFFFF;
  --secondary-button-bg-color: #F4C430;
  --secondary-button-text-color: #0A1A2F;
  --primary-button-hover-bg-color: #072146;
  --primary-button-hover-text-color: #FFFFFF;
  --secondary-button-hover-bg-color: #FFE066;
  --secondary-button-hover-text-color: #072146;
}

/* ===========================
   Removed Editor / Builder Highlighting
   (Hover, Click Outline Boxes)
   =========================== */

.hovered-element {
  outline: #3871E0 dashed 2px;
}

.clicked-element {
  outline: #3871E0 solid 2px;
}

.clicked-code-section {
  border: #3B82F6 solid 2px;
}

/* Gallery filter tabs */
.gallery-filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.25rem;
  padding:.8rem 1.1rem;
  border-radius:999px;
  font-weight:700;
  font-size:0.95rem;
  border:1px solid var(--light-border-color);
  background: var(--light-background-color);
  color: var(--dark-text-color);
  transition: all .2s ease;
}

.gallery-filter:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  border-color: var(--accent-color);
}

.gallery-filter.active{
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--dark-text-color);
}