:root {
  --bp-xs: 360px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/*
 * Breakpoint convention (standardized across new/assets/css/pages/*):
 * - CSS custom properties (var()) cannot be used inside @media queries in most browsers.
 * - The variables above are available for layout values (padding, max-width, etc.).
 * - Media queries must use the literal values 360px, 480px, 768px, 1024px, 1280px
 *   to match these variables. Do not introduce ad-hoc breakpoints (e.g. 640px, 1023px)
 *   in new/assets/css/pages/*.css or new/assets/css/components/*.css unless there is a
 *   documented, design-driven reason (leave a comment explaining why).
 * - Default direction is desktop-first (`max-width`), matching the majority of existing
 *   page styles. `min-width` (mobile-first) is acceptable within a single self-contained
 *   component file as long as it does not mix directions with `max-width` rules for the
 *   same selector.
 * - assets/css/libs/** (vendor/theme files such as frontend.css) are legacy WordPress
 *   theme exports and are NOT subject to this convention — do not rewrite their breakpoints.
 */

html {
  -webkit-text-size-adjust: 100%;
}

img,
video {
  max-width: 100%;
  height: auto;
}