/* ==========================================================
   TYPOGRAPHY.CSS
   Fradesign Global
   ========================================================== */

/* ==========================================================
   BASE
   ========================================================== */

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

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);

    letter-spacing: -0.03em;
}

h1 {
    font-size: clamp(3rem, 6vw, 4.5rem);
}

h2 {
    font-size: clamp(2.2rem, 4vw, 3rem);
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.375rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

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

p {
    color: var(--color-text-light);
    line-height: var(--line-height-loose);

    margin-bottom: var(--space-md);
}

p:last-child {
    margin-bottom: 0;
}

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

a {
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary);
}

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

small {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

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

ul,
ol {
    margin: 0;
    padding: 0;
}

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

blockquote {
    padding-left: var(--space-lg);

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

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

    font-style: italic;
}

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

code,
pre {
    font-family:
        Consolas,
        Menlo,
        Monaco,
        monospace;
}

code {
    padding: 2px 6px;

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

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

    font-size: .9em;
}

pre {
    padding: var(--space-lg);

    overflow-x: auto;

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

    background: var(--color-surface-alt);
}

/* ==========================================================
   HELPERS
   ========================================================== */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--color-text-light);
}

.text-primary {
    color: var(--color-primary);
}

.text-white {
    color: var(--color-white);
}

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

.bold {
    font-weight: var(--font-weight-bold);
}

.semibold {
    font-weight: var(--font-weight-semibold);
}

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

.regular {
    font-weight: var(--font-weight-regular);
}

/* ==========================================================
   EYEBROW
   ========================================================== */

.eyebrow {
    display: inline-block;

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

    color: var(--color-primary);

    font-size: .85rem;

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

    letter-spacing: .14em;

    text-transform: uppercase;
}

/* ==========================================================
   LEAD
   ========================================================== */

.lead {
    font-size: clamp(1.1rem, 2vw, 1.35rem);

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

    max-width: 760px;
}

/* ==========================================================
   SECTION TITLE
   ========================================================== */

.section-title {
    margin-bottom: var(--space-lg);
}

.section-description {
    max-width: 760px;

    margin-inline: auto;

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