/**
 * Utility classes — typography, spacing, radius.
 *
 * @package Fundamento
 */

/* -------------------------------------------------------------------------
   Display typography
   ------------------------------------------------------------------------- */

.text-display-h1-alt {
	font-family: var(--font-family-display);
	font-size: var(--text-display-h1-alt-size);
	font-weight: 400;
	line-height: var(--text-display-h1-alt-lh);
	letter-spacing: var(--text-display-h1-alt-ls);
}

.text-display-h2 {
	font-family: var(--font-family-display);
	font-size: var(--text-display-h2-size);
	font-weight: 400;
	line-height: var(--text-display-h2-lh);
	letter-spacing: var(--text-display-h2-ls);
}

.text-display-h3 {
	font-family: var(--font-family-display);
	font-size: var(--text-display-h3-size);
	font-weight: 400;
	line-height: var(--text-display-h3-lh);
	letter-spacing: var(--text-display-h3-ls);
}

.text-display-h4 {
	font-family: var(--font-family-display);
	font-size: var(--text-display-h4-size);
	font-weight: 400;
	line-height: var(--text-display-h4-lh);
	letter-spacing: var(--text-display-h4-ls);
}

.text-display-h5 {
	font-family: var(--font-family-display);
	font-size: var(--text-display-h5-size);
	font-weight: 400;
	line-height: var(--text-display-h5-lh);
	letter-spacing: var(--text-display-h5-ls);
}

.text-display-h6 {
	font-family: var(--font-family-display);
	font-size: var(--text-display-h6-size);
	font-weight: 400;
	line-height: var(--text-display-h6-lh);
	letter-spacing: var(--text-display-h6-ls);
}

.text-display-h6-medium {
	font-family: var(--font-family-display);
	font-size: var(--text-display-h6-medium-size);
	font-weight: 500;
	line-height: var(--text-display-h6-medium-lh);
	letter-spacing: var(--text-display-h6-medium-ls);
}

.text-display-h7 {
	font-family: var(--font-family-display);
	font-size: var(--text-display-h7-size);
	font-weight: 500;
	line-height: var(--text-display-h7-lh);
	letter-spacing: var(--text-display-h7-ls);
}

/* -------------------------------------------------------------------------
   Body typography
   ------------------------------------------------------------------------- */

.text-body-xl-medium {
	font-family: var(--font-family-body);
	font-size: var(--text-body-xl-size);
	font-weight: 500;
	line-height: var(--text-body-xl-lh);
	letter-spacing: var(--text-body-xl-ls);
}

.text-body-lg-regular {
	font-family: var(--font-family-body);
	font-size: var(--text-body-lg-size);
	font-weight: 400;
	line-height: var(--text-body-lg-lh);
	letter-spacing: var(--text-body-lg-ls);
}

.text-body-lg-medium {
	font-family: var(--font-family-body);
	font-size: var(--text-body-lg-size);
	font-weight: 500;
	line-height: var(--text-body-lg-lh);
	letter-spacing: var(--text-body-lg-ls);
}

.text-body-md-regular {
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 400;
	line-height: var(--text-body-md-lh);
	letter-spacing: var(--text-body-md-ls);
}

.text-body-md-medium {
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 500;
	line-height: var(--text-body-md-lh);
	letter-spacing: var(--text-body-md-ls);
}

.text-body-md-light {
	font-family: var(--font-family-body);
	font-size: var(--text-body-md-size);
	font-weight: 300;
	line-height: var(--text-body-md-lh);
	letter-spacing: var(--text-body-md-ls);
}

.text-body-sm-regular {
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	font-weight: 400;
	line-height: var(--text-body-sm-lh);
	letter-spacing: var(--text-body-sm-ls);
}

.text-body-sm-medium {
	font-family: var(--font-family-body);
	font-size: var(--text-body-sm-size);
	font-weight: 500;
	line-height: var(--text-body-sm-lh);
	letter-spacing: var(--text-body-sm-medium-ls);
}

/* -------------------------------------------------------------------------
   Text color utilities
   ------------------------------------------------------------------------- */

.text-default { color: var(--color-text-default); }
.text-subtle { color: var(--color-text-subtle); }
.text-muted { color: var(--color-text-muted); }
.text-disabled { color: var(--color-text-disabled); }
.text-inverse { color: var(--color-text-inverse); }
.text-brand { color: var(--color-text-brand); }
.text-on-brand { color: var(--color-text-on-brand); }

/* -------------------------------------------------------------------------
   Background utilities
   ------------------------------------------------------------------------- */

.bg-default { background-color: var(--color-bg-default); }
.bg-subtle { background-color: var(--color-bg-subtle); }
.bg-brand { background-color: var(--color-bg-brand); }
.bg-brand-subtle { background-color: var(--color-bg-brand-subtle); }
.bg-inverse { background-color: var(--color-bg-inverse); }

/* -------------------------------------------------------------------------
   Border radius utilities
   ------------------------------------------------------------------------- */

.rounded-none { border-radius: var(--radius-none); }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* -------------------------------------------------------------------------
   Spacing utilities — gap
   ------------------------------------------------------------------------- */

.gap-8 { gap: var(--space-8); }
.gap-16 { gap: var(--space-16); }
.gap-24 { gap: var(--space-24); }
.gap-32 { gap: var(--space-32); }
.gap-48 { gap: var(--space-48); }

/* -------------------------------------------------------------------------
   Spacing utilities — margin block
   ------------------------------------------------------------------------- */

.mb-0 { margin-block-end: var(--space-0); }
.mb-8 { margin-block-end: var(--space-8); }
.mb-16 { margin-block-end: var(--space-16); }
.mb-24 { margin-block-end: var(--space-24); }
.mb-32 { margin-block-end: var(--space-32); }
.mb-48 { margin-block-end: var(--space-48); }

/* -------------------------------------------------------------------------
   Layout utilities
   ------------------------------------------------------------------------- */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }