:root {
    /*
        → tq: turquoise
        → lp: landing page
    */
    /* Color */
    --tq-dark: #227F7F;
    --tq: #43B3AE;
    --tq-mild: #AACFCF;
    --tq-minty: #C6E9E6;
    --tq-light: #F2FBFA;
    --orange: #FBCAA2;
    --orange-light: #FEF4ED;
    --orange-dark: #E6781F;

    /* Typography */
    --lp-h1-font-size: clamp(2.5rem, 5vw, 5rem); /* 40px to 80px */
    --lp-h2-font-size: clamp(1.25rem, 5vw, 6rem); /* 20px to 96px */
    --lp-h3-font-size: clamp(1.25rem, 2.5vw, 2.25rem); /* 20px to 36px */
    --lp-h4-font-size: clamp(1.125rem, 1.5vw, 1.5rem); /* 18px to 24px */
    --lp-h5-font-size: clamp(1rem, 1.5vw, 1.25rem); /* 16px to 20px */
    --lp-h6-font-size: clamp(0.75rem, 1vw, 1.125rem); /* 12px to 18px */

    --lp-p-font-size: clamp(1rem, 1.5vw, 1.125rem); /* 16px to 18px*/
    /* Section */
    --lp-section-gap: clamp(3.7rem, 5.6vw, 5rem); /* 59.2px to 80px */
}

/* Typography */
.landing-page h1 {
    font-size: var(--lp-h1-font-size);
    font-weight: bold;
}

.landing-page h2 {
    font-size: var(--lp-h2-font-size);
}

.landing-page h3 {
    font-size: var(--lp-h3-font-size);
}

.landing-page h4 {
    font-size: var(--lp-h4-font-size); 
}

.landing-page h5 {
    font-size: var(--lp-h5-font-size); 
}

.landing-page h6 {
    font-size: var(--lp-h6-font-size);
}

.landing-page p {
    font-size: var(--lp-p-font-size);
}


/* Focus */
.landing-page *:focus-visible {
    outline: 2px solid;
    outline-offset: 5px;
}
.landing-page .primary-focus:focus-visible {
    outline-color: var(--tq);
}
.landing-page .secondary-focus:focus-visible {
    outline-color: var(--tq-dark);
}

/* Sections */
.landing-page .section-title {
    color: var(--tq-dark);
    text-transform: uppercase;
}

.landing-page .text-underline {
    width: fit-content;
    position: relative;
}

    .landing-page .text-underline::after {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40%;
        height: 2px;
        background: currentColor;
    }

.landing-page .span-underline {
    text-decoration: underline;
    text-underline-offset: 15%;
}

/* Link */
.landing-page .lp-link {
    text-decoration: underline;
    outline-offset: 2px;
}
    .landing-page .lp-link:hover,
    .landing-page .lp-link:focus-visible {
        text-underline-offset: 8%;
    }