/* ==========================================================
   CERS DESIGN SYSTEM
   TYPOGRAPHY
========================================================== */

:root{

    /* Fonts */

    --font-primary: "Inter", Arial, Helvetica, sans-serif;
    --font-heading: "Inter", Arial, Helvetica, sans-serif;
    --font-code: Consolas, monospace;

    /* Sizes */

    --font-size-xs:12px;
    --font-size-sm:13px;
    --font-size-md:15px;
    --font-size-lg:18px;
    --font-size-xl:22px;

    --font-size-h3:26px;
    --font-size-h2:36px;
    --font-size-h1:52px;
    /* Line Heights */
    --line-tight:1.2;
    --line-normal:1.6;
    --line-relaxed:1.8;
}

/* ==========================================================
   GLOBAL
========================================================== */

body{
    font-family:var(--font-primary);
    font-size:var(--font-size-md);
    line-height:var(--line-normal);
}

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

h1{
    font-family:var(--font-heading);
    font-size:var(--font-size-h1);
    font-weight:700;
    line-height:var(--line-tight);
}

.subtitle{
    font-size:var(--font-size-xl);
    font-weight:600;
}

h2{
    font-family:var(--font-heading);
    font-size:var(--font-size-h2);
    font-weight:700;
    line-height:var(--line-tight);
}

h3{
    font-family:var(--font-heading);
    font-size:var(--font-size-h3);
    font-weight:600;
    line-height:var(--line-tight);
}

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

p{
    font-size:var(--font-size-md);
    line-height:var(--line-relaxed);
    color:#f3f4f6;
}

label{
    font-size:var(--font-size-sm);
}

.small-text{
    font-size:var(--font-size-sm);
    opacity:.85;
}

.helper-text{
    font-size:var(--font-size-xs);
}
/* ==========================================================
   FORM ELEMENTS
========================================================== */

input,
textarea,
select{
    font-family:var(--font-primary);
    font-size:var(--font-size-sm);
}