/* =========================================================
   Base — global typography & element defaults
   ========================================================= */

body {
    margin: 0;
    background-color: var(--color-white);
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-teal-950);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Headings ---------- */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
    font-family: var(--font-display);
    letter-spacing: var(--letter-spacing-normal);
    color: var(--color-heading);
}

h1 , .h1{
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h1);
    letter-spacing: var(--letter-spacing-h1);
}

/* accent word inside a page title */
h1 span , .h1 span{
    color: var(--color-signal-500);
}

h2 , .h2{
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h2);
}

h3 , .h3{
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h3);
}

h4 , .h4{
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h4);
    letter-spacing: var(--letter-spacing-h4);
}

h5 , .h5{
    font-size: var(--font-size-h5);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h5);
}

h6 , .h6{
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h6);
}

/* ---------- Body copy ---------- */

p {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-body);
    color: var(--color-ink-900);
}

strong,
b {
    font-weight: var(--font-weight-semibold);
}

/* ---------- Links & buttons ---------- */

a {
    color: inherit;
    text-decoration: none;
}

a:hover,
a:focus-visible {
    text-decoration: none;
}

button {
    font-family: var(--font-primary);
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--color-signal-500);
    outline-offset: 2px;
}