/*
============================================================
Manual Rehab NYC
typography.css

Purpose:
Controls all text styling including fonts,
headings, paragraphs, links, and editorial elements.

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

/* ==========================================================================
   Base Typography
   ========================================================================== */

body {

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

    font-size: var(--font-size-base);

    font-weight: 400;

    color: var(--color-text);

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

}


/* ==========================================================================
   Headings
   ========================================================================== */

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

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

    font-weight: 500;

    line-height: 1.15;

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

}


/* ==========================================================================
   Heading Sizes
   ========================================================================== */

h1 {

    font-size: var(--font-size-4xl);

}


h2 {

    font-size: var(--font-size-3xl);

}


h3 {

    font-size: var(--font-size-2xl);

}


h4 {

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

}


/* ==========================================================================
   Paragraphs
   ========================================================================== */

p {

    line-height: 1.75;

    color: var(--color-text);

}


/* ==========================================================================
   Lead Text
   ========================================================================== */

.lead {

    font-size: var(--font-size-lg);

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

}


/* ==========================================================================
   Small Text
   ========================================================================== */

.small {

    font-size: var(--font-size-sm);

}


/* ==========================================================================
   Links
   ========================================================================== */

a {

    color: var(--color-primary);

    transition: color var(--transition-fast);

}


a:hover {

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

}


/* ==========================================================================
   Eyebrow Text
   ========================================================================== */

.eyebrow {

    font-size: var(--font-size-sm);

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--color-accent);

}


/* ==========================================================================
   Quotes
   ========================================================================== */

blockquote {

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

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

    font-style: italic;

    line-height: 1.5;

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

}