html {
    color: var(--theme-text);
    font-family: var(--ds-font-body);
    font-synthesis-weight: none;
}

body {
    color: var(--theme-text);
    font-family: var(--ds-font-body);
    font-synthesis-weight: none;
}

::selection {
    color: var(--theme-selection-text);
    background: var(--theme-selection-bg);
}

.ui-accent {
    color: var(--theme-accent);
}

.ui-kicker {
    margin: 0;
    font-size: var(--type-meta);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--theme-accent);
}

.ui-title {
    margin: 0;
    font-family: var(--ds-font-brand);
    font-weight: 400;
    line-height: 0.94;
    letter-spacing: 0;
    text-wrap: balance;
}

.ui-title--hero {
    font-size: var(--type-display-hero);
    max-width: 12ch;
}

.ui-title--hero-accent {
    font-size: var(--type-display-hero-accent);
}

.ui-title--page {
    font-size: var(--type-page-title);
}

.ui-title--section {
    font-size: var(--type-section-title);
}

.ui-title--card {
    font-size: var(--type-card-title);
    line-height: 1;
}

.ui-text {
    margin: 0;
    font-size: var(--type-body);
    line-height: 1.58;
    color: var(--theme-text);
}

.ui-text--xl {
    font-size: var(--type-body-xl);
    line-height: 1.36;
}

.ui-text--lg {
    font-size: var(--type-body-lg);
    line-height: 1.48;
}

.ui-text--sm {
    font-size: var(--type-body-sm);
    line-height: 1.5;
}

.ui-text--meta {
    font-size: var(--type-meta);
    line-height: 1.4;
}

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

.ui-link {
    color: inherit;
    text-decoration-color: rgba(var(--theme-accent-rgb), 0.38);
    text-underline-offset: 0.16em;
}

.ui-link:hover,
.ui-link:focus-visible {
    color: var(--theme-accent);
    text-decoration-color: currentColor;
}