/* JUST BECCI OFFICIAL BRAND STYLES */

:root {
  /* Core Palette [cite: 53, 54, 56, 58, 60] */
  --pixelsand: #D9D7CE;  /* Primary Background [cite: 60, 93] */
  --dusk: #5E3FBE;       /* Secondary/Structural [cite: 54, 92] */
  --bubblegum: #E9428A;  /* Accent 1 [cite: 56, 91] */
  --peachwave: #EF776A;  /* Accent 2 [cite: 58, 91] */
  
  /* Typography [cite: 395, 397, 409] */
  --font-header: 'Work Sans', sans-serif; /* Global Bold Style [cite: 397, 405] */
  --font-body: 'Work Sans', sans-serif;   /* Optimized for screen [cite: 399] */
  --font-mono: 'Share Tech Mono', monospace; /* Tech/Nerd Accents [cite: 409, 412] */
}

/* 1. Global Background & Text */
body {
  background-color: var(--pixelsand) !important; /* Base layout color [cite: 52] */
  color: var(--dusk); /* Default text color for contrast [cite: 52] */
  font-family: var(--font-body);
  line-height: 1.6;
}

/* 2. Headlines [cite: 400] */
h1, h2, h3, h4 {
  font-family: var(--font-header);
  font-weight: 700;
  text-transform: uppercase; /* For the bold Becci-look [cite: 416] */
  color: var(--dusk);
}

/* 3. Buttons & CTAs [cite: 458, 460] */
.button-primary, .wp-block-button__link {
  background-color: var(--bubblegum) !important;
  color: white !important;
  border-radius: 4px; /* Keeping it modern/stable [cite: 416] */
  font-family: var(--font-mono); /* Nerd-touch for buttons */
  padding: 12px 24px;
  transition: 0.3s ease-in-out;
}

.button-primary:hover {
  background-color: var(--peachwave) !important; /* Sunset transition effect [cite: 97] */
}

/* 4. HUD Style Elements (Modular Boxes) [cite: 872, 874] */
.hud-box {
  border: 2px solid var(--dusk);
  background: rgba(94, 63, 190, 0.05); /* Soft Dusk transparency */
  padding: 20px;
  font-family: var(--font-mono);
}

/* 5. Sunset Gradient for Hero Sections [cite: 97] */
.sunset-gradient {
  background: linear-gradient(135deg, var(--dusk) 0%, var(--bubblegum) 50%, var(--peachwave) 100%);
  color: white;
}

/* 6. Logo & Whitespace Rule [cite: 451, 452] */
.site-logo {
  padding: 20px; /* Ensures the required 1/3 height clearance [cite: 452] */
}