/* HYDROSPA GROUP — brand tokens v1.0 */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;600;700&family=Red+Hat+Text:wght@400;500&display=swap');

:root {
  /* Colours */
  --hg-deep-navy: #0B3C5D;
  --hg-ocean: #1479A3;
  --hg-aqua: #39B8D4;
  --hg-ink: #0B2A3C;
  --hg-mist: #F4F7F8;
  --hg-light-aqua: #4FC0DC;
  --hg-ice: #A6E6F2;
  --hg-slate: #5A6B75;
  --hg-white: #FFFFFF;
  --hg-border: #DDE5E9;

  /* Semantic */
  --hg-bg: var(--hg-mist);
  --hg-surface: var(--hg-white);
  --hg-text: var(--hg-ink);
  --hg-text-muted: var(--hg-slate);
  --hg-link: var(--hg-ocean);
  --hg-primary: var(--hg-ocean);
  --hg-primary-hover: var(--hg-deep-navy);
  --hg-accent: var(--hg-aqua);

  /* Typography */
  --hg-font-display: 'Red Hat Display', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hg-font-text: 'Red Hat Text', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hg-h1: 700 48px/56px var(--hg-font-display);
  --hg-h2: 700 32px/40px var(--hg-font-display);
  --hg-h3: 500 22px/30px var(--hg-font-display);
  --hg-body: 400 16px/26px var(--hg-font-text);
  --hg-small: 400 14px/22px var(--hg-font-text);
  --hg-label: 500 12px/16px var(--hg-font-text);
  --hg-label-tracking: 0.12em;

  /* Shape & space */
  --hg-radius-sm: 10px;   /* buttons, inputs */
  --hg-radius-md: 16px;   /* cards */
  --hg-space-1: 4px;
  --hg-space-2: 8px;
  --hg-space-3: 16px;
  --hg-space-4: 24px;
  --hg-space-5: 32px;
  --hg-space-6: 48px;
  --hg-space-7: 64px;
  --hg-max-width: 1200px;
  --hg-shadow-card: 0 1px 2px rgba(11, 42, 60, 0.06), 0 8px 24px rgba(11, 42, 60, 0.06);
}

body { background: var(--hg-bg); color: var(--hg-text); font: var(--hg-body); margin: 0; }
h1 { font: var(--hg-h1); margin: 0 0 var(--hg-space-3); }
h2 { font: var(--hg-h2); margin: 0 0 var(--hg-space-3); }
h3 { font: var(--hg-h3); margin: 0 0 var(--hg-space-2); }
a { color: var(--hg-link); text-decoration: none; }
a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  h1 { font: 700 34px/40px var(--hg-font-display); }
  h2 { font: 700 26px/32px var(--hg-font-display); }
}

.hg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 15px/1 var(--hg-font-display);
  padding: 14px 22px; border-radius: var(--hg-radius-sm);
  background: var(--hg-primary); color: #fff; border: 1.5px solid var(--hg-primary);
  cursor: pointer; text-decoration: none;
}
.hg-btn:hover { background: var(--hg-primary-hover); border-color: var(--hg-primary-hover); text-decoration: none; }
.hg-btn--secondary { background: transparent; color: var(--hg-primary); }
.hg-btn--secondary:hover { background: var(--hg-primary); color: #fff; }

.hg-card {
  background: var(--hg-surface); border: 1px solid var(--hg-border);
  border-radius: var(--hg-radius-md); padding: var(--hg-space-5); box-shadow: var(--hg-shadow-card);
}
.hg-label { font: var(--hg-label); letter-spacing: var(--hg-label-tracking); text-transform: uppercase; color: var(--hg-text-muted); }