/* ==========================================================
   SERGIO

   File: typography.css
   Version: 2.1

   Purpose:
   Defines the global typography system used throughout
   the SERGIO digital flagship.

========================================================== */


/* ==========================================================
   FONT FACE
========================================================== */

/*

When the licensed Circular webfonts have been purchased,
replace this section with the @font-face declarations.

*/


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

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
}


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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-light);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-text-primary);
    text-wrap: balance;
}

h1 {
    font-size: var(--font-size-h1);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}


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

p {
    max-width: 65ch;
}


/* ==========================================================
   EMPHASIS
========================================================== */

strong {
    font-weight: var(--font-weight-medium);
}

em {
    font-style: italic;
}


/* ==========================================================
   SMALL TEXT
========================================================== */

small {
    font-size: var(--font-size-caption);
    color: var(--color-text-secondary);
}