/* ==========================================================
Project : Compro Doodle
Module  : Core
File    : typography.css
Version : 1.0.0
Author  : Doodle Engineering
========================================================== */

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

body{

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

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

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

    line-height:var(--line-relaxed);

    color:var(--color-text);

    background:var(--color-background);

}

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

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

    margin:0;

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

    font-weight:var(--font-bold);

    line-height:var(--line-tight);

    color:var(--color-text);

}

h1{

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

}

h2{

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

}

h3{

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

}

h4{

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

}

h5{

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

}

h6{

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

}

/* ==========================================================
   PARAGRAPH
========================================================== */

p{

    margin:0;

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

    line-height:var(--line-relaxed);

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

}

/* ==========================================================
   LINK
========================================================== */

a{

    color:inherit;

    text-decoration:none;

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

}

a:hover{

    color:var(--color-primary);

}

/* ==========================================================
   INLINE TEXT
========================================================== */

strong{

    font-weight:var(--font-bold);

}

b{

    font-weight:var(--font-bold);

}

em{

    font-style:italic;

}

small{

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

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

}

mark{

    padding:2px 4px;

    border-radius:var(--radius-xs);

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

    color:var(--color-text);

}

/* ==========================================================
   CODE
========================================================== */

code{

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

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

}

pre{

    overflow:auto;

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

}

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

blockquote{

    margin:0;

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

    border-left:4px solid var(--color-primary);

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

    font-style:italic;

}

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

hr{

    border:none;

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

}

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

::selection{

    background:var(--color-primary);

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

}

/* ==========================================================
   PLACEHOLDER
========================================================== */

::placeholder{

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

    opacity:1;

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

:focus-visible{

    outline:none;

    box-shadow:var(--focus-ring);

}

/* ==========================================================
   MOBILE TYPOGRAPHY
========================================================== */

@media (max-width:768px){

    h1{

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

    }

    h2{

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

    }

    h3{

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

    }

    h4{

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

    }

    h5{

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

    }

    h6{

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

    }

    p{

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

    }

}