:root {
  --font-body: "Inter", sans-serif;
  --font-heading: "Outfit", sans-serif;

  --type-display: clamp(1.75rem, 4vw, 3.2rem);
  --type-title: 1.5rem;
  --type-subtitle: 1.125rem;
  --type-body: 1rem;
  --type-small: 0.875rem;
  --type-caption: 0.75rem;
  --type-micro: 0.6875rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.2;
  --leading-body: 1.6;
}

body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
}

h1,
.type-display {
  font-family: var(--font-heading);
  font-size: var(--type-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

h2,
#submit > h2,
#scoresTitle,
#recentSection > h2,
.type-title {
  font-family: var(--font-heading);
  font-size: var(--type-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

h3,
#history h3,
.type-subtitle {
  font-family: var(--font-heading);
  font-size: var(--type-subtitle);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

h4,
h5,
h6,
#history h4 {
  font-family: var(--font-heading);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.score-rows th,
.admin-data th,
.score-v2-table th {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
}

small,
.type-body {
  font-size: var(--type-body);
}

.type-small {
  font-size: var(--type-small);
}

.type-caption {
  font-size: var(--type-caption);
}

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

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

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

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

input,
button,
select,
#publicGameDialog {
  font-family: var(--font-body);
  font-size: var(--type-body);
}

strong,
b,
.score-player,
.score-row-name,
.score-row-points,
.score-rank,
.score-v2-multiplier,
.score-v2-points,
.score-v2-total,
.use-card-count,
.use-card-action,
.use-card-owner strong {
  font-weight: var(--weight-bold);
}

button,
label {
  font-weight: var(--weight-semibold);
}

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

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

.score-logout {
  font-size: var(--type-body);
}

#status,
.shell > main > label,
.shell > main > select,
.admin-panel label,
.admin-panel input,
.admin-panel button,
#recent button,
.use-card-text,
.score-v2-panel > summary,
.public-game-actions button {
  font-size: var(--type-small);
}

#history,
.score-rows,
.admin-panel,
.admin-list table,
.score-v2-panel,
.score-v2-table,
.player-help,
.score-points {
  font-size: var(--type-small);
}

.score-rank,
.score-rows th,
.pagination button,
.admin-legend,
.admin-data button,
.use-card-owner {
  font-size: var(--type-caption);
}

footer {
  font-size: var(--type-micro);
}

details > summary,
.player-help > summary,
.activity-section summary,
main > section > details > summary,
.score-v2-panel > summary,
#admin > summary,
.admin-panel details > summary,
#history summary {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.admin-panel summary {
  font-size: var(--type-small);
}

.player-help > summary,
.admin-panel details > summary,
.admin-list summary,
#history summary {
  font-size: var(--type-small);
}

.use-card-count {
  font-size: var(--type-small);
}

.score-v2-table th button {
  font: inherit;
  font-weight: var(--weight-semibold);
}

u,
.type-underline {
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

@media (max-width: 760px) {
  :root {
    --type-title: 1.25rem;
  }

  .play-mode #gameTitle {
    font-size: var(--type-display);
  }
}