/* Theme variables (easy to edit) */
:root{
  /* Header */
  --header-height-desktop: 72px;
  --header-height-mobile: 64px;
  --header-bg-top: transparent;
  --header-bg-scrolled: rgba(0,0,0,0.88);
  --header-backdrop-scrolled: blur(6px);
  --header-border-scrolled: rgba(255,255,255,0.04);
  --header-shadow-scrolled: 0 6px 18px rgba(0,0,0,0.35);

  /* Hero */
  --hero-min-height: 80vh;
  --hero-overlay: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.35));

  /* Colors */
  --color-primary: #111827;
  --color-accent: #ff4d4f;
  --color-academy: #ef3b36;

  /* Buttons / pills */
  --academy-pill-bg: var(--color-academy);
  --academy-pill-color: #fff;

  /* Spacing / transitions */
  --transition-fast: 200ms;
  --transition-medium: 250ms;
}

/* Helpful comments:
 - Edit values above to change site theme.
 - Replace hero and section images inside the `images/` folder.
 - Header heights control the top offset for content (used by styles.css).
*/