/* This file contains the font styles for the application
    Nomenclature for font styles:
    1. DISPLAY: Used for large, attention-grabbing text
        Size categories:
        LG: Large
        MD: Medium
        SM: Small
        XS: Extra Small

        Weight categories:
        Regular: 400
        Medium: 500
        Semibold: 600
        Bold: 700

    2. TEXT: Used for body text and paragraphs
        Size categories:
        LG: Large
        MD: Medium
        SM: Small
        XS: Extra Small

        Weight categories:
        Regular: 400
        Medium: 500
        Semibold: 600
        Bold: 700
*/


/* Text styles */

:root{
    --font-display: 'Outfit', system-ui, sans-serif;

    /*  ========= DISPLAY variables  ========= */
    /* LG variables */
    --display-lg-regular-size: 48px;
    --display-lg-regular-line: 60px;

    --display-lg-medium-size: 48px;
    --display-lg-medium-line: 60px;

    --display-lg-semibold-size: 48px;
    --display-lg-semibold-line: 60px;

    --display-lg-bold-size: 48px;
    --display-lg-bold-line: 60px;

    /* MD variables */
    --display-md-regular-size: 36px;
    --display-md-regular-line: 44px;

    --display-md-medium-size: 36px;
    --display-md-medium-line: 44px;

    --display-md-semibold-size: 36px;
    --display-md-semibold-line: 44px;

    --display-md-bold-size: 36px;
    --display-md-bold-line: 44px;

    /* SM variables */
    --display-sm-regular-size: 30px;
    --display-sm-regular-line: 38px;

    --display-sm-medium-size: 30px;
    --display-sm-medium-line: 38px;

    --display-sm-semibold-size: 30px;
    --display-sm-semibold-line: 38px;

    --display-sm-bold-size: 30px;
    --display-sm-bold-line: 38px;

    /* XS variables */
    --display-xs-regular-size: 24px;
    --display-xs-regular-line: 32px;

    --display-xs-medium-size: 24px;
    --display-xs-medium-line: 32px;

    --display-xs-semibold-size: 24px;
    --display-xs-semibold-line: 32px;

    --display-xs-bold-size: 24px;
    --display-xs-bold-line: 32px;

    /*  ========= TEXT variables  ========= */
    /* XL variables */
    --text-xl-regular-size: 20px;
    --text-xl-regular-line: 30px;

    --text-xl-medium-size: 20px;
    --text-xl-medium-line: 30px;

    --text-xl-semibold-size: 20px;
    --text-xl-semibold-line: 30px;

    --text-xl-bold-size: 20px;
    --text-xl-bold-line: 30px;

    /* LG variables */
    --text-lg-regular-size: 18px;
    --text-lg-regular-line: 28px;

    --text-lg-medium-size: 18px;
    --text-lg-medium-line: 28px;

    --text-lg-semibold-size: 18px;
    --text-lg-semibold-line: 28px;

    --text-lg-bold-size: 18px;
    --text-lg-bold-line: 28px;

    /* MD variables */
    --text-md-regular-size: 16px;
    --text-md-regular-line: 24px;

    --text-md-medium-size: 16px;
    --text-md-medium-line: 24px;

    --text-md-semibold-size: 16px;
    --text-md-semibold-line: 24px;

    --text-md-bold-size: 16px;
    --text-md-bold-line: 24px;

    /* SM variables */
    --text-sm-regular-size: 14px;
    --text-sm-regular-line: 20px;

    --text-sm-medium-size: 14px;
    --text-sm-medium-line: 20px;

    --text-sm-semibold-size: 14px;
    --text-sm-semibold-line: 20px;

    --text-sm-bold-size: 14px;
    --text-sm-bold-line: 20px;

    /* XS variables */
    --text-xs-regular-size: 12px;
    --text-xs-regular-line: 16px;

    --text-xs-medium-size: 12px;
    --text-xs-medium-line: 16px;

    --text-xs-semibold-size: 12px;
    --text-xs-semibold-line: 16px;

    --text-xs-bold-size: 12px;
    --text-xs-bold-line: 16px;

}

/* ========= DISPLAY LG  ========= */
.cg-display-lg-regular {
    font-family: var(--font-display);
    font-size: var(--display-lg-regular-size);
    line-height: var(--display-lg-regular-line);
    font-weight: 400;
}
.cg-display-lg-medium {
    font-family: var(--font-display);
    font-size: var(--display-lg-medium-size);
    line-height: var(--display-lg-medium-line);
    font-weight: 500;
}
.cg-display-lg-semibold {
    font-family: var(--font-display);
    font-size: var(--display-lg-semibold-size);
    line-height: var(--display-lg-semibold-line);
    font-weight: 600;
}
.cg-display-lg-bold {
    font-family: var(--font-display);
    font-size: var(--display-lg-bold-size);
    line-height: var(--display-lg-bold-line);
    font-weight: 700;
}
/* ========= DISPLAY MD ========= */
.cg-display-md-regular {
    font-family: var(--font-display);
    font-size: var(--display-md-regular-size);
    line-height: var(--display-md-regular-line);
    font-weight: 400;
}
.cg-display-md-medium {
  font-family: var(--font-display);
  font-size: var(--display-md-medium-size);
  line-height: var(--display-md-medium-line);
  font-weight: 500;
}
.cg-display-md-semibold {
  font-family: var(--font-display);
  font-size: var(--display-md-semibold-size);
  line-height: var(--display-md-semibold-line);
  font-weight: 600;
}
.cg-display-md-bold {
  font-family: var(--font-display);
  font-size: var(--display-md-bold-size);
  line-height: var(--display-md-bold-line);
  font-weight: 700;
}

/* ========= DISPLAY SM ========= */
.cg-display-sm-regular {
  font-family: var(--font-display);
  font-size: var(--display-sm-regular-size);
  line-height: var(--display-sm-regular-line);
  font-weight: 400;
}
.cg-display-sm-medium {
  font-family: var(--font-display);
  font-size: var(--display-sm-medium-size);
  line-height: var(--display-sm-medium-line);
  font-weight: 500;
}
.cg-display-sm-semibold {
  font-family: var(--font-display);
  font-size: var(--display-sm-semibold-size);
  line-height: var(--display-sm-semibold-line);
  font-weight: 600;
}
.cg-display-sm-bold {
  font-family: var(--font-display);
  font-size: var(--display-sm-bold-size);
  line-height: var(--display-sm-bold-line);
  font-weight: 700;
}
/* ========= DISPLAY XS ========= */

.cg-display-xs-regular {
  font-family: var(--font-display);
  font-size: var(--display-xs-regular-size);
  line-height: var(--display-xs-regular-line);
  font-weight: 400;
}
.cg-display-xs-medium {
  font-family: var(--font-display);
  font-size: var(--display-xs-medium-size);
  line-height: var(--display-xs-medium-line);
  font-weight: 500;
}
.cg-display-xs-semibold {
  font-family: var(--font-display);
  font-size: var(--display-xs-semibold-size);
  line-height: var(--display-xs-semibold-line);
  font-weight: 600;
}
.cg-display-xs-bold {
  font-family: var(--font-display);
  font-size: var(--display-xs-bold-size);
  line-height: var(--display-xs-bold-line);
  font-weight: 700;
}
/* ========= TEXT XL  ========= */
.cg-text-xl-regular {
    font-family: var(--font-display);
    font-size: var(--text-xl-regular-size);
    line-height: var(--text-xl-regular-line);
    font-weight: 400;
}

.cg-text-xl-medium {
    font-family: var(--font-display);
    font-size: var(--text-xl-medium-size);
    line-height: var(--text-xl-medium-line);
    font-weight: 500;
}

/* ========= TEXT LG  ========= */
.cg-text-lg-regular {
    font-family: var(--font-display);
    font-size: var(--text-lg-regular-size);
    line-height: var(--text-lg-regular-line);
    font-weight: 400;
}
.cg-text-lg-medium {
    font-family: var(--font-display);
    font-size: var(--text-lg-medium-size);
    line-height: var(--text-lg-medium-line);
    font-weight: 500;
}
.cg-text-lg-semibold {
    font-family: var(--font-display);
    font-size: var(--text-lg-semibold-size);
    line-height: var(--text-lg-semibold-line);
    font-weight: 600;
}
.cg-text-lg-bold {
    font-family: var(--font-display);
    font-size: var(--text-lg-bold-size);
    line-height: var(--text-lg-bold-line);
    font-weight: 700;
}
/* ========= TEXT MD ========= */
.cg-text-md-regular {
    font-family: var(--font-display);
    font-size: var(--text-md-regular-size);
    line-height: var(--text-md-regular-line);
    font-weight: 400;
}
.cg-text-md-medium {
    font-family: var(--font-display);
    font-size: var(--text-md-medium-size);
    line-height: var(--text-md-medium-line);
    font-weight: 500;
}
.cg-text-md-semibold {
    font-family: var(--font-display);
    font-size: var(--text-md-semibold-size);
    line-height: var(--text-md-semibold-line);
    font-weight: 600;
}
.cg-text-md-bold {
    font-family: var(--font-display);
    font-size: var(--text-md-bold-size);
    line-height: var(--text-md-bold-line);
    font-weight: 700;
}
/* ========= TEXT SM ========= */
.cg-text-sm-regular {
    font-family: var(--font-display);
    font-size: var(--text-sm-regular-size);
    line-height: var(--text-sm-regular-line);
    font-weight: 400;
}
.cg-text-sm-medium {
    font-family: var(--font-display);
    font-size: var(--text-sm-medium-size);
    line-height: var(--text-sm-medium-line);
    font-weight: 500;
}
.cg-text-sm-semibold {
    font-family: var(--font-display);
    font-size: var(--text-sm-semibold-size);
    line-height: var(--text-sm-semibold-line);
    font-weight: 600;
}
.cg-text-sm-bold {
    font-family: var(--font-display);
    font-size: var(--text-sm-bold-size);
    line-height: var(--text-sm-bold-line);
    font-weight: 700;
}
/* ========= TEXT XS ========= */
.cg-text-xs-regular {
    font-family: var(--font-display);
    font-size: var(--text-xs-regular-size);
    line-height: var(--text-xs-regular-line);
    font-weight: 400;
}
.cg-text-xs-medium {
    font-family: var(--font-display);
    font-size: var(--text-xs-medium-size);
    line-height: var(--text-xs-medium-line);
    font-weight: 500;
}
.cg-text-xs-semibold {
    font-family: var(--font-display);
    font-size: var(--text-xs-semibold-size);
    line-height: var(--text-xs-semibold-line);
    font-weight: 600;
}
.cg-text-xs-bold {
    font-family: var(--font-display);
    font-size: var(--text-xs-bold-size);
    line-height: var(--text-xs-bold-line);
    font-weight: 700;
}