/**
  *  Root Fonts, Text types & Header
  * 
  * This sets a standard text properties for the HPD framework environment
*/
:root 
{

  

  /** Default Font Size 
  */
  --fs: 14px;
  
  
  
  /** Default Line Height 
  */
  --lh: 1.5rem;


  
  /** Default Font Family 
  */
  --def-font: 
  "Arial", 
  "Helvetica", 
  "sans-serif";


  
  /** Alternitive Font Family 
  */
  --alt-font: 
  "Segoe UI Emoji", 
  "Segoe UI Symbol", 
  "Arial", 
  "Helvetica", 
  "sans-serif";

}











/*----------------------------------------------------------------------------
* Font Family
*----------------------------------------------------------------------------*/
.def-font { font-family: var(--def-font) !important; }
.alt-font { font-family: var(--alt-font) !important; }










/*----------------------------------------------------------------------------
* Text Size, Weight Style Properties
*----------------------------------------------------------------------------*/
.i
{
  font-style: italic !important;
}

.u 
{
  text-decoration: underline !important;
}

.b
{
  font-weight: bold !important;
}

.strong 
{
  font-weight: 800 !important;
}

.txt-0x7
{
  font-size: 0.8rem !important;
}

.txt-0x8
{
  letter-spacing: 0.020rem;
  font-size: 0.8rem !important;
}

.txt-0x9
{
  letter-spacing: 0.020rem;
  font-size: 0.9rem !important;
}

.txt-1x0
{
  font-size: 1rem !important;
}

.txt-1x1
{
  font-size: 1.1rem !important;
}

.txt-1x2
{
  font-size: 1.2rem !important;
}

.txt-1x3
{
  font-size: 1.3rem !important;
}

.txt-1x4
{
  font-size: 1.4rem !important;
}










/*----------------------------------------------------------------------------
* Container Line Heights
*----------------------------------------------------------------------------*/
.lh-1x0 
{
  line-height: 1rem !important;
}
.lh-1x2 
{
  line-height: 1.2rem !important;
}
.lh-1x3 
{
  line-height: 1.3rem !important;
}
.lh-1x4 
{
  line-height: 1.4rem !important;
}
.lh-1x5 
{
  line-height: 1.5rem !important;
}
.lh-1x6 
{
  line-height: 1.6rem !important;
}
.lh-1x7
{
  line-height: 1.7rem !important;
}
.lh-1x8 
{
  line-height: 1.8rem !important;
}
.lh-1x9
{
  line-height: 1.9rem !important;
}
.lh-2x0 
{
  line-height: 2rem !important;
}














/*----------------------------------------------------------------------------
* Clamped Text Style Properties
*----------------------------------------------------------------------------*/
.big-txt 
{
  font-size: clamp(2.5rem, 3.5vw + 1rem, 5rem);
  line-height: clamp(3.1rem, 4.5vw + 1rem, 6rem);
}

.big-up-txt 
{
  letter-spacing: 0.070rem;
  text-transform: uppercase;
  font-size: clamp(2.5rem, 3.5vw + 1rem, 4.5rem);
  line-height: clamp(3.1rem, 4.5vw + 1rem, 6rem);
}

.big-txt-bold
{
  font-weight: 800;
  font-family: var(--def-font);
  font-size: clamp(2.5rem, 3.5vw + 1rem, 5.5rem);
  line-height: clamp(3.1rem, 4.5vw + 1rem, 7rem);
}


.mid-txt 
{
  font-size: clamp(1.2rem, 3.5vw + 1rem, 1.5rem);
  line-height: clamp(1.8rem, 3.5vw + 1rem, 2.2rem);
}

.mid-up-txt 
{
  font-size: clamp(1.1rem, 3.5vw + 1rem, 1.9rem);
  line-height: clamp(1.8rem, 2vw + 1rem, 2.7rem);
}

.mid-txt-bold 
{
  font-weight: 800;
  font-family: var(--def-font);
  font-size: clamp(1.2rem, 3.5vw + 1rem, 4.2rem);
  line-height: clamp(1.8rem, 3.5vw + 1rem, 5rem);
}



.section-header-txt 
{
  font-weight: 800;
  font-family: var(--def-font);
  font-size: clamp(1.2rem, 2vw + 1rem, 1.8rem);
  line-height: clamp(1.7rem, 3.5vw + 1rem, 3rem);
}












/*----------------------------------------------------------------------------
* Text Color Properties
*----------------------------------------------------------------------------*/
.red 
{
  color: var(--base-red) !important;
}

.blue
{
  color: var(--base-blue) !important;
}

.dark
{
  color: var(--prime-0) !important;
}

.green
{
  color: var(--base-green) !important;
}

.purple
{
  color: var(--base-purple) !important;
}

.muted 
{
  opacity: 0.8 !important;
}