/* Color Palette start */
/* Primary colors */
.coralOrange{ 
    color: var( --coralOrange) !important;
}
.charcoal{ 
    color: var( --charcoal) !important;
}
/* Ui & Text field colors */
.white{
    color: var( --white) !important;
}
.verylightGrey{
    color: var( --verylightGrey) !important;
}
.lightGrey{
    color:var( --lightGrey) !important;
}
.silver{
    color: var( --silver) !important;
}
.light{
    color: var( --light) !important;
}
/* For text colors*/
.black{
    color: var( --black) !important;
}
.dimGrey{
    color: var( --dimGrey) !important;
}
.grey{
    color: var( --grey) !important;
}
/* secondary/support colors*/
.cyan{
    color: var( --cyan) !important;
}
.lightYellow{
    color: var( --lightYellow) !important;
}
/* Color Palette end */

body{
    font-family: 'Gibson';
}

/* H1: Hero Title (Restricted) - bold */
.hero_title_bold{       
    font-size: 5rem;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: 0.1px;     
 }

 /* H1: Hero Title (Restricted) - normal */
.hero_title_normal {
    font-size: 5rem;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: 0.1px;
}

/* H2: Section Title */
.section_title{
    font-size: 2.5rem;
    font-weight: 100;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

/* H3: Section Description (For Hero) */
.section_description_banner{
    font-size: 2rem;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
    letter-spacing: 0.3px;
}

/* H4: Story Title */
.story_title{
    font-size: 2rem;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
    letter-spacing: 0.7px;
  }

/* H5: Paragraph Title/Product Name */
.paragraph_title {
    font-size: 1.5rem;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: 0.3px;
  }

/* H6: Product Tagline/Story Tagline */
.product_tagline, .story_tagline, .description {
    font-size: 1.5rem;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
    letter-spacing: 0.3px;
  }

/* SECTION HEADER - Special case. Fixed, no other variations*/
.section_heading {
    font-size: 1.125rem;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: 2.4px;
}

/* SUB SECTION HEADER - Special case. Fixed, no other variations */
.sub-section_heading {
    font-size: 0.875rem;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.43;
    letter-spacing: 4.8px;
}

/* Body Text 1 */
p{
    font-size: 1.7rem;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.7;
    letter-spacing: 0.5px;
}

/* User Input Text/ Form - Fields / Search */
input, textarea, form{
    font-size: 1rem;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: normal;
}

/* BUTTON/CTA/NAV ANCHORS */
.button_cta, .navigation {
    font-size: 0.875rem;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.43;
    letter-spacing: 1.6px;
  }

/* Image Captions/Error states */
.image_captions, .error_states {
    font-size: 0.75rem;
    font-weight: 300;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: 1px;
}


/* ============LibreBaskerville fonts============  */

/* * Para/Quote Highlight break */
.hero_title_bold_libre {
    font-size: 7.500rem;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 0.4;
    letter-spacing: normal;
}

/* H1: Hero Title (Restricted) - normal */
.hero_title_normal_libre {
    font-size: 2.5rem;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

/* H1: Hero Title (Restricted) - italic */
.hero_tile_italic_libre {
    font-size: 2rem;
    font-weight: normal;
    font-style: italic;
    font-stretch: normal;
    line-height: 1.5;
    letter-spacing: 0.1px;
}

@media screen and (max-width: 576px) {
    /* H1: Hero Title (Restricted) - bold */
    .hero_title_bold{       
        font-size: 1.75rem;
        font-weight: 600;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.14;
        letter-spacing: 0px;
    }

    /* H1: Hero Title (Restricted) - normal */
    .hero_title_normal {
        font-size: 1.75rem;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.14;
        letter-spacing: 0px;
    }

    /* H2: Section Title */
    .section_title{
        font-size: 1.5rem;
        font-weight: 300;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.33;
        letter-spacing: 0.1px;
    }

    /* H3: Section Description (For Hero) - pending */
    .section_description_banner{
        font-size: 1.375rem;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.36;
        letter-spacing: 0.5px;
    }

    /* H4: Story Title */
    .story_title{
        font-size: 1.375rem;
        font-weight: normal;
        font-style: normal;
        font-stretch: normal;
        line-height: 1.36;
        letter-spacing: 0.5px;
    }
}