/* ==========================================================================
   DREAMERS DESIGN SYSTEM
   Version: 1.0
   File: typography.css

   Regole tipografiche globali.

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


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

body {

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

    font-size: var(--fs-body);

    font-weight: var(--fw-regular);

    line-height: var(--lh-body);

    color: var(--color-text-primary);

    background-color: var(--color-bg-primary);

}


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

h1,
h2,
h3,
h4,
h5,
h6 {

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

    font-weight: var(--fw-semibold);

    line-height: var(--lh-heading);

    letter-spacing: var(--ls-tight);

    color: var(--color-text-primary);

    margin-bottom: var(--space-6);

}


h1 {

    font-size: var(--fs-h1);

}


h2 {

    font-size: var(--fs-h2);

}


h3 {

    font-size: var(--fs-h3);

}


h4 {

    font-size: var(--fs-h4);

}


h5 {

    font-size: var(--fs-h5);

}


h6 {

    font-size: var(--fs-h6);

}


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

.display-xxl {

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

    font-size: var(--fs-display-xxl);

    font-weight: var(--fw-light);

    line-height: 1;

    letter-spacing: var(--ls-tight);

}


.display-xl {

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

    font-size: var(--fs-display-xl);

    font-weight: var(--fw-light);

    line-height: 1;

    letter-spacing: var(--ls-tight);

}


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

p {

    margin-bottom: var(--space-6);

    color: var(--color-text-secondary);

}


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

a {

    transition:

        color var(--duration-base) var(--ease-out);

}


a:hover {

    color: var(--color-brand-gold);

}


/* ==========================================================================
   STRONG
   ========================================================================== */

strong {

    font-weight: var(--fw-semibold);

    color: var(--color-text-primary);

}


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

em {

    font-style: italic;

}


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

small {

    font-size: var(--fs-caption);

    color: var(--color-text-secondary);

}


/* ==========================================================================
   BLOCKQUOTE
   ========================================================================== */

blockquote {

    border-left: 2px solid var(--color-brand-gold);

    padding-left: var(--space-6);

    margin: var(--space-16) 0;

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

    font-size: var(--fs-h4);

    font-style: italic;

    color: var(--color-text-primary);

}


/* ==========================================================================
   LISTS
   ========================================================================== */

ul,
ol {

    margin-bottom: var(--space-6);

}


li {

    margin-bottom: var(--space-2);

}


/* ==========================================================================
   HORIZONTAL RULE
   ========================================================================== */

hr {

    border: 0;

    border-top: 1px solid var(--color-border);

    margin: var(--space-16) 0;

}