/* ─── Design Tokens ─────────────────────────────────────────────────────────
   Source: Adobe XD prototype AGC data (extracted by extract-tokens.js)
   These are EXACT values from the XD file — not approximations.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Colors ──────────────────────────────────────────────────────────── */

  /* Brand */
  --hap-green: #129f4b;
  --hap-navy: #125076;
  --hap-blue: #4d6c91;

  /* Neutrals */
  --hap-black: #000000;
  --hap-gray-dark: #707070;
  --hap-gray: #adadad;
  --hap-gray-light: #bababa;
  --hap-border: #d0d0d0;
  --hap-border-light: #d8d8d8;
  --hap-bg-alt: #ededed;
  --hap-bg-light: #f5f5f5;
  --hap-white: #ffffff;

  /* ─── Typography ──────────────────────────────────────────────────────── */

  --hap-font-heading: 'Montserrat', sans-serif;
  --hap-font-body: 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Font sizes — clamp(floor, vw @ 1280, ceiling) */
  --hap-text-xs:  clamp(10px, 0.9375vw, 15px);   /* 12px @ 1280 */
  --hap-text-sm:  clamp(12px, 1.0938vw, 18px);   /* 14px @ 1280 */
  --hap-text-base: 16px;                          /* FIXED — html root anchor */
  --hap-text-lg:  clamp(15px, 1.4063vw, 23px);   /* 18px @ 1280 */
  --hap-text-xl:  clamp(17px, 1.6406vw, 26px);   /* 21px @ 1280 */
  --hap-text-2xl: clamp(20px, 1.875vw, 30px);    /* 24px @ 1280 */
  --hap-text-3xl: clamp(23px, 2.1875vw, 35px);   /* 28px @ 1280 */
  --hap-text-4xl: clamp(32px, 2.9688vw, 48px);   /* 38px @ 1280 */
  --hap-text-5xl: clamp(33px, 3.125vw, 50px);    /* 40px @ 1280 */
  --hap-text-6xl: clamp(37px, 3.4375vw, 55px);   /* 44px @ 1280 */

  /* Font weights */
  --hap-weight-light: 300;
  --hap-weight-regular: 400;
  --hap-weight-medium: 500;
  --hap-weight-bold: 700;

  /* Line heights — unitless ratios (auto-scale with fluid font-size) */
  --hap-leading-tight:   1.0;    /* was 16px */
  --hap-leading-snug:    1.25;   /* was 20px */
  --hap-leading-normal:  1.5;    /* was 24px */
  --hap-leading-relaxed: 1.55;   /* was 28px — pairs with text-lg/text-xl */
  --hap-leading-loose:   2.0;    /* was 32px */

  /* ─── Border Radius ───────────────────────────────────────────────────── */

  --hap-radius-sm: 4px;
  --hap-radius-md: 5px;
  --hap-radius-lg: 17px;
  --hap-radius-pill: 22px;

  /* ─── Shadows ─────────────────────────────────────────────────────────── */

  --hap-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

  /* ─── Spacing ──────────────────────────────────────────────────────────── */

  --hap-space-xs:  clamp(6px, 0.625vw, 10px);    /* 8px @ 1280 */
  --hap-space-sm:  clamp(12px, 1.25vw, 20px);    /* 16px @ 1280 */
  --hap-space-md:  clamp(18px, 1.875vw, 30px);   /* 24px @ 1280 */
  --hap-space-ml:  clamp(24px, 2.3438vw, 38px);  /* 30px @ 1280 */
  --hap-space-lg:  clamp(30px, 3.125vw, 50px);   /* 40px @ 1280 */
  --hap-space-xl:  clamp(48px, 5vw, 80px);       /* 64px @ 1280 */
  --hap-space-2xl: clamp(72px, 7.5vw, 120px);    /* 96px @ 1280 */

  /* Section vertical padding — vh-based for viewport-proportional rhythm */
  --hap-section-pad: clamp(48px, 8vh, 96px);

  /* ─── Layout ──────────────────────────────────────────────────────────── */

  --hap-max-width: 1280px;
  --hap-line-height: 1.6;

  /* ─── Opacity ─────────────────────────────────────────────────────────── */

  --hap-overlay-light: 0.2;
  --hap-overlay-medium: 0.4;
  --hap-overlay-heavy: 0.65;

  /* ─── Transitions ─────────────────────────────────────────────────────── */

  --hap-transition: 250ms ease;
}