/* Bemkagame brand reskin — loaded after style.css/responsive.css.
   Colors sampled from the actual logo (logo8.png): purple + orange wordmark. */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Fredoka:wght@500;600;700&display=swap");

:root {
  --font-heading: "Fredoka", sans-serif;
  --font-body: "Nunito", sans-serif;

  --color-primary: #6C2484;
  --color-primary-rgb: 108, 36, 132;
  --color-secondary: #E47818;
  --color-secondary-rgb: 228, 120, 24;
  --gradient-1: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);

  --bg-primary-light: rgba(var(--color-primary-rgb), .06);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-xl: 20px;
  --radius-lg: 28px;
}

/* Main site nav: brand purple instead of the old hardcoded hex */
.header-area .main-navbar .nav-link {
  color: var(--color-primary);
}

/* Bootstrap's nav-pills ship with Bootstrap's own blue, not this template's
   palette — brand the "Our Games" tab switcher explicitly. */
.nav-pills .nav-link {
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: var(--font-medium);
  color: var(--color-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--gradient-1);
  color: var(--color-white);
}

/* Mascot art */
.mascot-fox {
  max-width: 220px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(var(--color-primary-rgb), .28));
}