/*
 * Tavola, the theme of the Turno app: felt, walnut, brass and score pad paper. It applies to the
 * elements with the tavola class: Turno's pages, and its card on the home page.
 */

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

.tavola {
  --text: light-dark(#1e1b18, #eae1d6);
  --muted: light-dark(#4c463f, #d0c6b9);
  --background: light-dark(#f9f6f1, #1a1815);
  --accent: light-dark(#2f5d50, #9ed1bd);
  --divider: light-dark(#cec7bd, #4c4740);
  --highlight: light-dark(rgb(224 176 74 / 45%), rgb(224 176 74 / 35%));
  --art: #2f5d50;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.tavola h1,
.tavola h2,
.tavola .brand,
.tavola .brand-name,
.tavola .app-name {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
}

/* A brass highlighter across the title, like the players' names in the app */
.tavola h1,
.tavola .app-name {
  text-decoration: underline var(--highlight);
  text-decoration-thickness: 0.4em;
  text-underline-offset: -0.25em;
  text-decoration-skip-ink: none;
}

.tavola strong {
  font-weight: 700;
}