/* ================================
   Bold Label Core Typography (FIXED for Elementor)
   Fluid range: 475px → 1280px
   ================================ */




/* ---------- Tokens ---------- */
:root {
   /* Fonts */
   --bl-font-body: "BL Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
   --bl-font-heading: var(--bl-font-body);

   /* Letter Spacing */
   --bl-ls-tight: -0.02em;

   /* Fluid range: 475px -> 1280px (805px span) */
   --bl-fluid-step: calc((100vw - 475px) / 805);

  /* Display 2xl: 44 -> 72 */
  --bl-display-2xl-size: clamp(44px, calc(44px + (28 * var(--bl-fluid-step))), 72px);
  --bl-display-2xl-lh: clamp(56px, calc(56px + (34 * var(--bl-fluid-step))), 90px);

  /* Display xl: 36 -> 60 */
  --bl-display-xl-size: clamp(36px, calc(36px + (24 * var(--bl-fluid-step))), 60px);
  --bl-display-xl-lh: clamp(44px, calc(44px + (28 * var(--bl-fluid-step))), 72px);

  /* Display lg: 30 -> 48 */
  --bl-display-lg-size: clamp(30px, calc(30px + (18 * var(--bl-fluid-step))), 48px);
  --bl-display-lg-lh: clamp(38px, calc(38px + (22 * var(--bl-fluid-step))), 60px);

  /* Display md: 26 -> 36 */
  --bl-display-md-size: clamp(26px, calc(26px + (10 * var(--bl-fluid-step))), 36px);
  --bl-display-md-lh: clamp(30px, calc(30px + (14 * var(--bl-fluid-step))), 44px);

  /* Display sm: 22 -> 30 */
  --bl-display-sm-size: clamp(22px, calc(22px + (8 * var(--bl-fluid-step))), 30px);
  --bl-display-sm-lh: clamp(30px, calc(30px + (8 * var(--bl-fluid-step))), 38px);

  /* Display xs: 20 -> 24 */
  --bl-display-xs-size: clamp(20px, calc(20px + (4 * var(--bl-fluid-step))), 24px);
  --bl-display-xs-lh: clamp(28px, calc(28px + (4 * var(--bl-fluid-step))), 32px);

  /* Text xl: 18 -> 20 */
  --bl-text-xl-size: clamp(18px, calc(18px + (2 * var(--bl-fluid-step))), 20px);
  --bl-text-xl-lh: clamp(28px, calc(28px + (2 * var(--bl-fluid-step))), 30px);

  /* Text lg: 16 -> 18 */
  --bl-text-lg-size: clamp(16px, calc(16px + (2 * var(--bl-fluid-step))), 18px);
  --bl-text-lg-lh: clamp(24px, calc(24px + (2 * var(--bl-fluid-step))), 26px);

  /* Text md: 15 -> 16 */
  --bl-text-md-size: clamp(15px, calc(15px + (1 * var(--bl-fluid-step))), 16px);
  --bl-text-md-lh: 24px;

  /* Standard Text Sizes */
  --bl-text-sm-size: 14px;
  --bl-text-sm-lh: 20px;

  --bl-text-xs-size: 12px;
  --bl-text-xs-lh: 18px;
}

/* ---------- Base mapping ---------- */
body {
   font-size: var(--bl-text-md-size);
   line-height: var(--bl-text-md-lh);
}

/* Headings defaults (semantic HTML stays sane) */
h1 {
   font-size: var(--bl-display-xl-size);
   line-height: var(--bl-display-xl-lh);
   letter-spacing: var(--bl-ls-tight);
}

h2 {
   font-size: var(--bl-display-lg-size);
   line-height: var(--bl-display-lg-lh);
   letter-spacing: var(--bl-ls-tight);
}

h3 {
   font-size: var(--bl-display-md-size);
   line-height: var(--bl-display-md-lh);
   letter-spacing: var(--bl-ls-tight);
}

h4 {
   font-size: var(--bl-display-sm-size);
   line-height: var(--bl-display-sm-lh);
}

h5 {
   font-size: var(--bl-display-xs-size);
   line-height: var(--bl-display-xs-lh);
}

h6 {
   font-size: var(--bl-text-lg-size);
   line-height: var(--bl-text-lg-lh);
}