/* typography-styles.css */
/* Heading styles */
h1 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h1);
    margin: 0;
    color: var(--text-colour-light); /* Use the light mode text colour by default */
}

h2 {
    font-family: var(--font-family-3);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-h2);
    margin: 0;
    color: var(--text-colour-light); /* Use the light mode text colour by default */
}

h3 {
    font-family: var(--font-family-3);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-h3);
    margin: 0;
    color: var(--text-colour-light); /* Use the light mode text colour by default */
}

.body-1 {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-subtitle2);
    color: var(--black-100);
}

.body-2 {
    font-family: var(--font-family-2);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body2);
    color: var(--text-colour-light); /* Use the light mode text colour by default */
}

.body-3 {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body2);
    color: var(--text-colour-light); /* Use the light mode text colour by default */
}

/* Subtitle styles */
.subtitle-1 {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-subtitle1);
    color: var(--text-colour-light); /* Use the light mode text colour by default */
}

.subtitle-2 {
    font-weight: var(--font-weight-semi-bold);
    font-size: var(--font-size-subtitle2);
    color: var(--text-colour-light); /* Use the light mode text colour by default */
}

.link-label-medium {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-label-medium);
    color: var(--text-colour-light); /* Use the light mode text colour by default */
    line-height: 42px;
}

.no-a-style {
    text-decoration: none;
}