/* sizing related settings and variables */

:root {
  /* breakpoints */
  --sm: 640px;
  --md: 1024px;
  --lg: 1200px;

  /* spacings */
  --breve: 64px;
  --semibreve: 32px;
  --minim-dotted: 24px;
  --minim: 16px;
  --crotchet: 8px;
  --quaver: 5px;
  --semiquaver: 2px;

  /* key sizes - mobile-first defaults */
  /* Use mobile default values here so larger breakpoints override with min-width queries. */
  --header-height: 60px; /* default (mobile) */
  --text-maxwidth: 1400px;
  --page-maxwidth: 1400px;
}

/* Responsive breakpoints (mobile-first):
   - Use standard min-width/max-width media queries instead of non-standard `width <=`/`width >` syntax.
   - Keep mobile defaults in :root, then progressively enhance for larger screens. */

/* Mobile: default body padding already set via variables (see :root defaults above) */
@media (max-width: 640px) {
  :root {
    --body-padding: var(--minim);
  }
}

/* Tablet / small laptops - use min/max to target the range between 641px and 1024px */
@media (min-width: 641px) and (max-width: 1024px) {
  :root {
    --body-padding: var(--semibreve);
    /* slightly taller header on medium screens */
    --header-height: clamp(60px, 4.5vw, 70px);
  }
}

/* Desktop and up */
@media (min-width: 1025px) {
  :root {
    --body-padding: var(--breve);
    /* fixed header height of 70px on desktop */
    --header-height: 70px;
  }
}