/* =========================================================
   Bounce Back Media — Global Brand & UI System
   SINGLE SOURCE OF TRUTH
   ========================================================= */

/* === BRAND TOKENS === */
:root {
  /* Core Brand */
  --bbm-purple: #9D2EAB;
  --bbm-teal: #39C7C7;
  --bbm-yellow: #EAB10F;
  --bbm-pink: #E190D4;

  /* Neutrals */
  --bbm-ink: #1D1D21;
  --bbm-grey: #6B7280;
  --bbm-grey-soft: #F8F9FA;
  --bbm-white: #FFFFFF;

  /* Extended Accent */
  --bbm-bright-blue: #00B4FF;

  /* Bootstrap Mapping */
  --bs-primary: var(--bbm-purple);
  --bs-primary-rgb: 157, 46, 171;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;

  /* Layout Tokens */
  --radius-lg: 1.25rem;
  --radius-pill: 50rem;
  --shadow-soft: 0 10px 30px rgba(29, 29, 33, 0.08);
}

/* === TYPOGRAPHY === */
.brand-font {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}

/* Replace your existing .text-glitch */
.text-glitch{
  text-shadow:
    1px 0 0 rgba(57,199,199,.55),
   -1px 0 0 rgba(225,144,212,.55);
}


.tagline-font {
  font-family: 'Courier New', Courier, monospace;
  color: var(--bbm-pink);
  font-weight: 700;
  letter-spacing: 0.15em;
}

/* === GLOBAL === */
body {
  background-color: var(--bbm-grey-soft);
  color: var(--bbm-ink);
}

a {
  color: var(--bbm-purple);
}
a:hover {
  color: var(--bbm-bright-blue);
}

/* === BUTTON SYSTEM === */
/* Motion only */
.btn-pop {
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  transition: transform .25s cubic-bezier(.175,.885,.32,1.275),
              box-shadow .25s ease;
}
.btn-pop:hover {
  transform: translateY(-4px);
}
.btn-pop:active {
  transform: scale(0.95);
}

/* Primary (Purple) */
.btn-primary {
  --bs-btn-bg: var(--bbm-purple);
  --bs-btn-border-color: var(--bbm-purple);
  --bs-btn-hover-bg: var(--bbm-bright-blue);
  --bs-btn-hover-border-color: var(--bbm-bright-blue);
  --bs-btn-active-bg: var(--bbm-ink);
  --bs-btn-active-border-color: var(--bbm-ink);
}

/* Accent (Yellow) */
.btn-accent {
  background: var(--bbm-yellow);
  border-color: var(--bbm-yellow);
  color: var(--bbm-ink);
}
.btn-accent:hover {
  background: var(--bbm-ink);
  border-color: var(--bbm-ink);
  color: #fff;
}

/* Teal */
.btn-teal {
  background: var(--bbm-teal);
  border-color: var(--bbm-teal);
  color: #062725;
}
.btn-teal:hover {
  background: var(--bbm-ink);
  border-color: var(--bbm-ink);
  color: #fff;
}

/* === CARDS === */
.kit-card,
.card {
  border-radius: var(--radius-lg);
  border: none;
  background: var(--bbm-white);
  box-shadow: var(--shadow-soft);
}

.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(29, 29, 33, 0.12) !important;
}

/* === BADGES === */
.badge-primary {
  background: var(--bbm-purple);
  color: #fff;
}
.badge-accent {
  background: var(--bbm-yellow);
  color: var(--bbm-ink);
}
.badge-teal {
  background: var(--bbm-teal);
  color: #062725;
}

/* === BACKGROUNDS === */
.bg-soft-primary { background: rgba(157, 46, 171, .08) !important; }
.bg-soft-teal { background: rgba(57, 199, 199, .1) !important; }

/* === HERO TEXTURE === */
.hero {
  background:
    #ffffff
    url('../images/header-bg-texture.png')
    no-repeat center center;
  background-size: cover;
  position: relative;
}

/* === GEOMETRIC SHAPES === */
.bbm-shape {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  background: var(--bbm-purple);
}

/* Video Catalogue UI (index.php) */
.video-card .badge-float {
  position: static;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: var(--bbm-yellow);
  color: var(--bbm-ink);
  font-weight: 900;
  border-radius: var(--radius-pill);
  padding: .25rem .75rem;
  font-size: .78rem;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.video-card .tagline-inline {
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--bbm-ink-muted);
}