/* Shared tokens keep component headings aligned with this supplied scale. */
:root {
  --dp-h1-size: clamp(2.25rem, 4vw, 3rem);
  --dp-h2-size: clamp(1.75rem, 3vw, 2rem);
  --dp-h3-size: 1.5rem;
  --dp-h4-size: 1.25rem;
  --dp-h5-size: 1.125rem;
  --dp-h6-size: 1rem;
  --dp-hero-title-size: clamp(3rem, 6vw, 4rem);
}
/* ==========================================================================
   TEXT.CSS
   Global Typography Standards
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html
{
  font-size: 100%;
  /* 1rem = 16px */
}

body
{
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


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

h1,
h2,
h3,
h4,
h5,
h6
{
  margin-top: 0;
  margin-bottom: 0.75em;
  line-height: 1.2;
  font-weight: 700;
}

h1
{
  font-size: var(--dp-h1-size);
  line-height: 1.1;
}

h2
{
  font-size: var(--dp-h2-size);
  line-height: 1.2;
}

h3
{
  font-size: var(--dp-h3-size);
  line-height: 1.25;
}

h4
{
  font-size: var(--dp-h4-size);
  line-height: 1.3;
}

h5
{
  font-size: var(--dp-h5-size);
  line-height: 1.4;
}

h6
{
  font-size: var(--dp-h6-size);
  line-height: 1.4;
}


/* --------------------------------------------------------------------------
   Body Content
   -------------------------------------------------------------------------- */

p
{
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.6;
}

small,
.text-small
{
  font-size: 0.875rem;
  line-height: 1.5;
}

strong,
b
{
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

a
{
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
}

a:hover,
a:focus
{
  text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

ul,
ol
{
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

li
{
  margin-bottom: 0.375rem;
  line-height: 1.6;
}

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


/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

nav,
nav a,
.menu,
.menu a
{
  font-size: 1rem;
  line-height: 1.4;
}


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

button,
.button,
.btn,
input[type="submit"],
input[type="button"]
{
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 600;
}


/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

label
{
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 600;
}

input,
select,
textarea
{
  font: inherit;
  font-size: 1rem;
  /* Avoids automatic zoom on iOS */
  line-height: 1.5;
}

::placeholder
{
  font-size: 1rem;
}


/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

table
{
  font-size: 1rem;
  line-height: 1.5;
}

th
{
  font-weight: 700;
}


/* --------------------------------------------------------------------------
   Supporting / Meta Text
   -------------------------------------------------------------------------- */

.meta,
.caption,
.helper-text,
.eyebrow
{
  font-size: 0.875rem;
  line-height: 1.5;
}


/* --------------------------------------------------------------------------
   Large / Hero Typography
   -------------------------------------------------------------------------- */

.hero-title,
.display-title
{
  font-size: var(--dp-hero-title-size);
  line-height: 1.05;
}


/* --------------------------------------------------------------------------
   Content Width
   Helps maintain readable line lengths.
   -------------------------------------------------------------------------- */

.text-content,
.prose
{
  max-width: 70ch;
}


/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */

.text-xs
{
  font-size: 0.875rem;
}

.text-sm
{
  font-size: 0.9375rem;
}

.text-base
{
  font-size: 1rem;
}

.text-lg
{
  font-size: 1.125rem;
}

.text-xl
{
  font-size: 1.25rem;
}

.text-2xl
{
  font-size: 1.5rem;
}

.text-3xl
{
  font-size: 2rem;
}

.text-4xl
{
  font-size: 3rem;
}


/* --------------------------------------------------------------------------
   Mobile Adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --dp-h1-size: clamp(2rem, 9vw, 2.5rem);
    --dp-h2-size: clamp(1.625rem, 7vw, 1.875rem);
    --dp-h3-size: 1.375rem;
    --dp-hero-title-size: clamp(2.5rem, 11vw, 3rem);
  }
}