:root {
  --font-sans: "HKX Manrope", Arial, sans-serif;

  --site-max-width: 1500px;
  --site-gutter: 24px;
  --site-container-width: min(
    calc(100% - var(--site-gutter) - var(--site-gutter)),
    var(--site-max-width)
  );

  --brand-navy: #071f36;
  --brand-blue: #0078b8;
  --brand-blue-dark: #005f8f;
  --brand-cyan: #00c8ff;
  --brand-yellow: var(--brand-cyan);
  --brand-yellow-hover: var(--brand-blue);
  --surface-blue-soft: #eaf6ff;

  --text-primary: #10243a;
  --text-muted: #596775;
  --surface-white: #fff;
  --surface-page: #f5f8fb;
  --border-subtle: #d9e4ec;

  /* Compatibility aliases retained while storefront styles are migrated. */
  --pw-orange: var(--brand-blue);
  --hkx-site-container-width: var(--site-container-width);
  --hkx-site-container-max-width: var(--site-max-width);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  scrollbar-gutter: auto;
  overflow-y: scroll;
  -ms-overflow-style: scrollbar;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-synthesis: none;
}

img {
  display: block;
  max-width: 100%;
}

.site-container {
  width: var(--site-container-width);
  margin-inline: auto;
}

.page-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-container > section {
  width: 100%;
}

.site-header :is(button, input, select, textarea),
.home-page :is(button, input, select, textarea) {
  font: inherit;
}