:root {
  --hkfn-navy: #102c4c;
  --hkfn-navy-deep: #0c2c48;
  --hkfn-cyan: #0cacf0;
  --hkfn-cyan-icon: #4ca8ec;
  --hkfn-white: #ffffff;
  --hkfn-ink: #102c4c;
  --hkfn-muted: #5c6b7a;
  --hkfn-line: #e3eaf1;
  --hkfn-bg: #f4f7fb;
  --hkfn-card: #ffffff;
  --hkfn-radius: 14px;
  --hkfn-button: #0cacf0;
  --hkfn-button-hover: #0a96d4;

  /* Edge control — horizontal page padding + notch safe areas */
  --hkfn-pad-x: 16px;
  --hkfn-pad-x-sm: 14px;
  --hkfn-pad-x-xs: 12px;
  --hkfn-safe-l: env(safe-area-inset-left, 0px);
  --hkfn-safe-r: env(safe-area-inset-right, 0px);
  --hkfn-safe-t: env(safe-area-inset-top, 0px);
  --hkfn-safe-b: env(safe-area-inset-bottom, 0px);
  --hkfn-edge-l: max(var(--hkfn-pad-x), var(--hkfn-safe-l));
  --hkfn-edge-r: max(var(--hkfn-pad-x), var(--hkfn-safe-r));
  --hkfn-edge-x: max(var(--hkfn-pad-x), var(--hkfn-safe-l), var(--hkfn-safe-r));
  --hkfn-gutter: calc(var(--hkfn-edge-l) + var(--hkfn-edge-r));

  /* Floating CTAs — keep WA FAB + estate to-top stacked with gap */
  --hkfn-fab-h: 52px;
  --hkfn-fab-gap: 10px;
  --hkfn-fab-right: max(16px, var(--hkfn-safe-r));
  --hkfn-fab-bottom: max(20px, calc(var(--hkfn-safe-b) + 16px));
}

@media (max-width: 768px) {
  :root {
    --hkfn-pad-x: 16px;
    --hkfn-fab-h: 48px;
    --hkfn-fab-right: max(12px, var(--hkfn-safe-r));
    --hkfn-fab-bottom: max(16px, calc(var(--hkfn-safe-b) + 12px));
  }
}

@media (max-width: 480px) {
  :root {
    --hkfn-pad-x: 14px;
    --hkfn-fab-h: 46px;
    --hkfn-fab-gap: 8px;
    --hkfn-fab-right: max(10px, var(--hkfn-safe-r));
    --hkfn-fab-bottom: max(14px, calc(var(--hkfn-safe-b) + 10px));
  }
}