@import url("tokens.css");
@import url("fonts.css");

/* Headlines */
/* Reference: https://www.figma.com/design/sDc5n1DVOSEZJvzrt6pzaW/Energir---2025-Design-System?node-id=805-247&m=dev */
.ends-text_headline1 {
    font-family: var(--ends-font-merkury-bold);
    font-size: 45px;
    color: var(--ends-color-product-dark-blue);
    line-height: 120%;
}
.ends-text_headline2 {
    font-family: var(--ends-font-merkury-bold);
    font-size: 36px;
    color: var(--ends-color-product-dark-blue);
    line-height: 125%;
}
.ends-text_headline3 {
    font-family: var(--ends-font-merkury-bold);
    font-size: 30px;
    color: var(--ends-color-product-dark-blue);
    line-height: 125%;
}
.ends-text_headline4 {
    font-family: var(--ends-font-merkury-bold);
    font-size: 28px; /* https://www.figma.com/design/sDc5n1DVOSEZJvzrt6pzaW/Energir---2025-Design-System?node-id=0-1&p=f&vars=1&var-id=e44e9e4c3b9c6406334a3f0c4b0db44753de55f8%2F3743-42&m=dev */
    color: var(--ends-color-product-dark-blue);
    line-height: 120%;
}
.ends-text_headline4-custom {
    font-family: var(--ends-font-merkury-bold);
    font-size: 26px;
    color: var(--ends-color-product-dark-blue);
    line-height: 120%;
}
.ends-text_headline5 {
    font-family: var(--ends-font-merkury-bold);
    font-size: 20px;
    color: var(--ends-color-product-dark-blue);
    line-height: 120%;
}
.ends-text_lead {
    font-family: var(--ends-font-merkury-bold);
    font-size: 18px;
    color: var(--ends-color-product-dark-blue);
    line-height: 120%;
}
.ends-text_sub-headline {
    font-family: var(--ends-font-merkury-medium);
    font-size: 16px;
    color: var(--ends-color-product-dark-blue);
    line-height: 150%;
}

/* Headlines Grey */
.ends-text_headline2_grey {
    font-family: var(--ends-font-merkury-bold);
    font-size: 36px;
    color: var(--ends-color-grey-10);
    line-height: 125%;
}
.ends-text_headline5_grey {
    font-family: var(--ends-font-merkury-bold);
    font-size: 20px;
    color: var(--ends-color-grey-10);
    line-height: 120%;
}
.ends-text_headline4_grey {
    font-family: var(--ends-font-merkury-bold);
    font-size: 28px;
    color: var(--ends-color-grey-10);
    line-height: 120%;
}

/* Custom style not in Figma */
.ends-text_body-bold-large_m1 {
    font-family: var(--ends-font-merkury-bold);
    font-size: 16px;
    line-height: 140%;
}

@media (max-width: 48em) {
    .ends-text_headline3 {
        font-size: 28px;
    }
}

/* Body */
/* Reference: https://www.figma.com/design/sDc5n1DVOSEZJvzrt6pzaW/Energir---2025-Design-System?node-id=805-338&m=dev */
.ends-text_body-xl {
    font-family: var(--ends-font-arial);
    font-size: 18px;
    color: var(--ends-color-neutral-grey1);
    line-height: 140%;
}
.ends-text_body-large {
    font-family: var(--ends-font-arial);
    font-size: 16px;
    color: var(--ends-color-neutral-grey1);
    line-height: 150%;
}
.ends-text_body-large_neutral-grey {
    font-family: var(--ends-font-arial);
    font-size: 16px;
    color: var(--ends-color-grey-700);
    line-height: 150%;
}
.ends-text_body-medium {
    font-family: var(--ends-font-arial);
    font-size: 14px;
    color: var(--ends-color-neutral-grey1);
    line-height: 150%;
}
.ends-text_body-small {
    font-family: var(--ends-font-arial);
    font-size: 12px;
    color: var(--ends-color-neutral-grey1);
    line-height: 150%;
}
.ends-text_body-caption {
    font-family: var(--ends-font-arial);
    font-size: 10px;
    color: var(--ends-color-neutral-grey1);
    line-height: 150%;
}

/* Body - cyan */
.ends-text_body-medium_cyan {
    font-family: var(--ends-font-arial);
    font-size: 14px;
    color: var(--ends-color-cyan-25);
    line-height: 150%;
}

/* Body (bold) */
/* Reference: https://www.figma.com/design/sDc5n1DVOSEZJvzrt6pzaW/Energir---2025-Design-System?node-id=805-411&m=dev */
.ends-text_body-bold-xl {
    font-family: var(--ends-font-arial);
    font-size: 18px;
    font-weight: bold;
    color: var(--ends-color-neutral-grey1);
    line-height: 140%;
}
.ends-text_body-bold-large {
    font-family: var(--ends-font-arial);
    font-size: 16px;
    font-weight: bold;
    color: var(--ends-color-neutral-grey1);
    line-height: 140%;
}
.ends-text_body-bold-medium {
    font-family: var(--ends-font-arial);
    font-size: 14px;
    font-weight: bold;
    color: var(--ends-color-neutral-grey1);
    line-height: 130%;
}
.ends-text_body-bold-small {
    font-family: var(--ends-font-arial);
    font-size: 12px;
    font-weight: bold;
    color: var(--ends-color-neutral-grey1);
    line-height: 130%;
}
.ends-text_body-bold-caption {
    font-family: var(--ends-font-arial);
    font-size: 10px;
    font-weight: bold;
    color: var(--ends-color-neutral-grey1);
    line-height: 130%;
}

/* Body (bold) - cyan */
.ends-text_body-medium_cyan {
    font-family: var(--ends-font-arial);
    font-size: 14px;
    color: var(--ends-color-cyan-25);
    line-height: 130%;
}