/* =====================================================
   SYLICONVALLEY TYPOGRAPHY
===================================================== */

/* =====================================================
   FONT FAMILY
===================================================== */

:root {

    --font-display: Inter, Arial, sans-serif;
    --font-body: Inter, Arial, sans-serif;

}

/* =====================================================
   BODY
===================================================== */

body{

    font-family:var(--font-body);

    font-size:18px;

    font-weight:400;

    line-height:1.6;

    color:var(--sv-white);

    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

}

/* =====================================================
   DISPLAY
===================================================== */

.display-xl{

    font-family:var(--font-display);

    font-size:clamp(68px,7vw,96px);

    line-height:.94;

    letter-spacing:-.055em;

    font-weight:500;

}

.display-lg{

    font-family:var(--font-display);

    font-size:clamp(52px,5vw,72px);

    line-height:.96;

    letter-spacing:-.05em;

    font-weight:500;

}

/* =====================================================
   HEADINGS
===================================================== */

.heading-xl{

    font-family:var(--font-display);

    font-size:clamp(42px,4vw,56px);

    line-height:1;

    letter-spacing:-.04em;

    font-weight:500;

}

.heading-lg{

    font-family:var(--font-display);

    font-size:clamp(32px,3vw,42px);

    line-height:1.05;

    letter-spacing:-.03em;

    font-weight:500;

}

.heading-md{

    font-family:var(--font-display);

    font-size:28px;

    line-height:1.1;

    letter-spacing:-.02em;

    font-weight:500;

}

.heading-sm{

    font-family:var(--font-display);

    font-size:22px;

    line-height:1.2;

    font-weight:500;

}

/* =====================================================
   PARAGRAPHS
===================================================== */

.text-xl{

    font-size:24px;

    line-height:1.45;

}

.text-lg{

    font-size:20px;

    line-height:1.55;

}

.text{

    font-size:18px;

    line-height:1.65;

}

.text-sm{

    font-size:15px;

    line-height:1.6;

}

.text-xs{

    font-size:13px;

    line-height:1.5;

    letter-spacing:.02em;

}

/* =====================================================
   COLORS
===================================================== */

.text-white{

    color:var(--sv-white);

}

.text-muted{

    color:var(--sv-text-muted);

}

.text-soft{

    color:var(--sv-text-soft);

}

.text-orange{

    color:var(--sv-orange);

}

.text-turquoise{

    color:var(--sv-turquoise);

}

/* =====================================================
   LINKS
===================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:color .25s ease;

}

a:hover{

    color:var(--sv-orange);

}

/* =====================================================
   SELECTION
===================================================== */

::selection{

    background:var(--sv-orange);

    color:#fff;

}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:767px){

    body{

        font-size:16px;

    }

    .display-xl{

        font-size:clamp(46px,12vw,64px);

    }

    .display-lg{

        font-size:clamp(38px,10vw,52px);

    }

    .heading-xl{

        font-size:34px;

    }

    .heading-lg{

        font-size:28px;

    }

    .heading-md{

        font-size:24px;

    }

}