/* 
  TYPOGRAPHY SYSTEM

  Line Heights:
    - Headings: 1.15
    - Paragraphs: 1.25
    - Buttons/Labels: 1.00

  Letter Spacing:
    - Headings: -2% ≈ -0.02em
    - Paragraphs: 0
    - Buttons/Labels: 5% ≈ 0.05em

  Font Weights:
    - h1: 900
    - h2: 700
    - h3, h4, h5: 600
    - h6: 500
    - Paragraphs: 400 (normal) / 700 (bold)
    - Buttons/Labels: 600

  Font-Size Mapping:
    ---------------------------------------------------------------
    | Token       | Headings  | Paragraph   | Paragraph (italic) | Paragraph (bold) | Buttons | Labels  |
    ---------------------------------------------------------------
    | h1          | clamp(3rem, 2.5122rem + 2.439vw, 4.25rem)                        |
    | h2          | clamp(2.5rem, 2.2073rem + 1.4634vw, 3.25rem)                       |
    | h3          | clamp(2rem, 1.8049rem + 0.9756vw, 2.5rem)                          |
    | h4, p1, p1i, p1b, b1, l1 | clamp(1.35rem, 1.4024rem + 0.4878vw, 1.75rem)          |
    | h5, p2, p2i, p2b       | 1.25rem                                         |
    | h6, p3, p3i, p3b, b2, l2 | 1rem                                          |
    | p4, p4i, p4b, b3, l3   | 0.875rem                                       |
    ---------------------------------------------------------------
*/


/* ------------------------------ */
/*  Font Families                 */
/* ------------------------------ */
/* Adobe Fonts */
@import url("https://use.typekit.net/tqa4vtc.css");

:root {
  --font-family-heading: 'massilia', sans-serif;
  --font-family-paragraph: 'massilia', sans-serif;
  --font-family-button: 'massilia', sans-serif;
  --font-family-label: 'massilia', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
}

p, .p1, .p2, .p3, .p4 {
  font-family: var(--font-family-paragraph);
}

.b1, .b2, .b3 {
  font-family: var(--font-family-button);
}

.l1, .l2, .l3 {
  font-family: var(--font-family-label);
}


/* ------------------------------ */
/*  Font Colors                   */
/* ------------------------------ */
:root, html, body {
    color: var(--clr-base);
}

h4, h5, h6 {
    color: var(--clr-primary);
}

.clr-accent-txt, .clr-accent-txt * {
    color: var(--clr-primary);
}

.clr-white-txt, .clr-white-txt * {
    color: white;
}

a {
    color: var(--clr-base);
}

a:hover {
    color: var(--clr-primary);
}

/* ------------------------------ */
/*  Properties             */
/* ------------------------------ */
:root, html, body {
    font-style: normal;
    font-size: 16px;

  /* Line heights */
  --lh-heading: 1.1;
  --lh-paragraph: 1.175;
  --lh-btn-label: 1.00;

  /* Letter spacing */
  --ls-heading: -0.02em;
  --ls-paragraph: 0;
  --ls-btn-label: 0.05em;

  /* Text Alignment */
    .ta-left {text-align: left;}
    .ta-right {text-align: right;}
    .ta-center {text-align: center;}

  /* Font-Size Adjustments */
    .fs-95 :where(h1, h2, h3, h4, h5, h6, p, span) {font-size: .95em!important;}
    .fs-90 :where(h1, h2, h3, h4, h5, h6, p, span) {font-size: .9em!important;}
    .fs-85 :where(h1, h2, h3, h4, h5, h6, p, span) {font-size: .85em!important;}
    .fs-80 :where(h1, h2, h3, h4, h5, h6, p, span) {font-size: .8em!important;}
    .fs-75 :where(h1, h2, h3, h4, h5, h6, p, span) {font-size: .75em!important;}
    .fs-70 :where(h1, h2, h3, h4, h5, h6, p, span) {font-size: .7em!important;}
    .fs-65 :where(h1, h2, h3, h4, h5, h6, p, span) {font-size: .65em!important;}
    .fs-60 :where(h1, h2, h3, h4, h5, h6, p, span) {font-size: .6em!important;}
    .fs-55 :where(h1, h2, h3, h4, h5, h6, p, span) {font-size: .55em!important;}
    .fs-50 :where(h1, h2, h3, h4, h5, h6, p, span) {font-size: .5em!important;}
}

/* ------------------------------ */
/*  Headings                      */
/* ------------------------------ */

h1 {
  font-size: clamp(3rem, 2.5122rem + 2.439vw, 4.25rem);
  font-weight: 900;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: capitalize;
}

h2 {
  font-size: clamp(2.5rem, 2.2073rem + 1.4634vw, 3.25rem);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: capitalize;
}

h3,
.abx-button .elementor-button {
  font-size: clamp(2rem, 1.8049rem + 0.9756vw, 2.5rem);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
}

h4 {
  font-size: clamp(1.35rem, 1.4024rem + 0.4878vw, 1.75rem);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-transform: uppercase;
}

h5 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

h6 {
  font-size: 1rem;
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}

/* Base paragraph (p1) */
p,
.p1 {
  font-size: clamp(1.35rem, 1.4024rem + 0.4878vw, 1.75rem);
  font-weight: 400;
  line-height: var(--lh-paragraph);
  letter-spacing: var(--ls-paragraph);
}

.p1i,
p.italic {
  font-style: italic;
}

.p1b,
p.bold,
strong,
b {
  font-weight: 700;
}


/* Larger paragraph (p2) */
.p2,
.p2i,
.p2b {
  font-size: 1.25rem;
  line-height: var(--lh-paragraph);
  letter-spacing: var(--ls-paragraph);
}

.p2i {
  font-style: italic;
}

.p2b {
  font-weight: 700;
}

/* Fixed paragraph (p3) */
.p3,
.p3i,
.p3b {
  font-size: 1rem;
  line-height: var(--lh-paragraph);
  letter-spacing: var(--ls-paragraph);
}

.p3i {
  font-style: italic;
}

.p3b {
  font-weight: 700;
}

/* Small paragraph (p4) */
.p4,
.p4i,
.p4b {
  font-size: 0.875rem;
  line-height: var(--lh-paragraph);
  letter-spacing: var(--ls-paragraph);
}

.p4i {
  font-style: italic;
}

.p4b {
  font-weight: 700;
}


/* ------------------------------ */
/*  Buttons                       */
/* ------------------------------ */

.b1,
.b1 .elementor-button {
  font-size: clamp(1.35rem, 1.4024rem + 0.4878vw, 1.75rem);
  font-weight: 600;
  line-height: var(--lh-btn-label);
  letter-spacing: var(--ls-btn-label);
}

.b2,
.b2 .elementor-button {
  font-size: 1rem;
  font-weight: 600;
  line-height: var(--lh-btn-label);
  letter-spacing: var(--ls-btn-label);
}

.b3,
.b3 .elementor-button {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: var(--lh-btn-label);
  letter-spacing: var(--ls-btn-label);
}

/* ------------------------------ */
/*  Labels                        */
/* ------------------------------ */

.l1 {
  font-size: clamp(1.35rem, 1.4024rem + 0.4878vw, 1.75rem);
  font-weight: 600;
  line-height: var(--lh-btn-label);
  letter-spacing: var(--ls-btn-label);
}

.l2 {
  font-size: 1rem;
  font-weight: 600;
  line-height: var(--lh-btn-label);
  letter-spacing: var(--ls-btn-label);
}

.l3 {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: var(--lh-btn-label);
  letter-spacing: var(--ls-btn-label);
}