/* Stretty — website design tokens, v1.0.0 */
@font-face {
  font-family: "Verdict Sans";
  src: url("./fonts/VerdictSans-Bold.a5e200f9ba4a.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* color */
  --uv-color-red: #DA291C;
  --uv-color-red-hover: #B92217;
  --uv-color-ink: #101010;
  --uv-color-white: #FFFFFF;
  --uv-color-warm-white: #F3F0EA;
  --uv-color-muted: #625D56;
  --uv-color-line: #D8D2C9;
  --uv-color-divider-brand: #D9A39C;
  --uv-color-gold: #E8BE54;
  --uv-color-success: #24613B;
  --uv-color-error: #A51F18;
  --uv-color-focus: #101010;

  /* font */
  --uv-font-display: "Verdict Sans", Arial, sans-serif;
  --uv-font-body: Arial, Helvetica, sans-serif;
  --uv-font-accent: "Segoe Print", "Bradley Hand", "Apple Chancery", cursive;

  /* font-size */
  --uv-font-size-caption: 0.875rem;
  --uv-font-size-label: 1rem;
  --uv-font-size-body: 1.125rem;
  --uv-font-size-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --uv-font-size-heading-small: clamp(2rem, 1.6rem + 1vw, 2.5rem);
  --uv-font-size-heading: clamp(2.5rem, 1.8rem + 2vw, 4rem);
  --uv-font-size-display: clamp(3.5rem, 2rem + 4vw, 6rem);

  /* line-height */
  --uv-line-height-display: 1.08;
  --uv-line-height-heading: 1.15;
  --uv-line-height-body: 1.6;
  --uv-line-height-label: 1.4;

  /* letter-spacing */
  --uv-letter-spacing-display: -0.025em;
  --uv-letter-spacing-heading: -0.015em;
  --uv-letter-spacing-label: 0.04em;

  /* space */
  --uv-space-1: 0.25rem;
  --uv-space-2: 0.5rem;
  --uv-space-3: 0.75rem;
  --uv-space-4: 1.125rem;
  --uv-space-5: 1.5rem;
  --uv-space-6: 2rem;
  --uv-space-7: 3rem;
  --uv-space-8: 4.5rem;
  --uv-space-9: 6.75rem;

  /* layout */
  --uv-layout-page-max: 76rem;
  --uv-layout-reading-max: 42rem;
  --uv-layout-gutter: clamp(1.25rem, 4vw, 3rem);
  --uv-layout-section-gap: clamp(3rem, 7vw, 6.75rem);
  --uv-layout-control-min: 2.75rem;

  /* border */
  --uv-border-width: 1px;
  --uv-border-radius: 0px;

  /* motion */
  --uv-motion-fast: 120ms;
  --uv-motion-normal: 180ms;
  --uv-motion-easing: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* shadow */
  --uv-shadow-none: none;

  /* z-index */
  --uv-z-index-header: 10;
  --uv-z-index-overlay: 30;

  /* semantic */
  --uv-semantic-page: var(--uv-color-warm-white);
  --uv-semantic-surface: var(--uv-color-white);
  --uv-semantic-text: var(--uv-color-ink);
  --uv-semantic-text-muted: var(--uv-color-muted);
  --uv-semantic-action: var(--uv-color-red);
  --uv-semantic-action-hover: var(--uv-color-red-hover);
  --uv-semantic-on-action: var(--uv-color-white);
  --uv-semantic-selected-bg: var(--uv-color-ink);
  --uv-semantic-selected-text: var(--uv-color-white);
  --uv-semantic-selected-indicator: var(--uv-color-red);
  --uv-semantic-result-fill: var(--uv-color-red);
  --uv-semantic-result-track: var(--uv-color-line);
  --uv-semantic-focus-ring: var(--uv-color-focus);

}

/* Small foundation; import before component styles. */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--uv-semantic-page);
  color: var(--uv-semantic-text);
  font-family: var(--uv-font-body);
  font-size: var(--uv-font-size-body);
  line-height: var(--uv-line-height-body);
}
h1, h2, h3, .wordmark {
  font-family: var(--uv-font-display);
  font-weight: 700;
  font-synthesis: none;
  line-height: var(--uv-line-height-heading);
  letter-spacing: var(--uv-letter-spacing-heading);
  overflow-wrap: break-word;
}
h1 { font-size: var(--uv-font-size-display); line-height: var(--uv-line-height-display); letter-spacing: var(--uv-letter-spacing-display); }
h2 { font-size: var(--uv-font-size-heading); }
h3 { font-size: var(--uv-font-size-heading-small); }
button, input, select, textarea { font: inherit; }
button { min-height: var(--uv-layout-control-min); }
a { color: inherit; text-underline-offset: 0.18em; }
:focus-visible {
  outline: 2px solid var(--uv-semantic-focus-ring);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--uv-color-white);
}
.vote-count, .player-rating { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  :root { --uv-motion-fast: 0ms; --uv-motion-normal: 0ms; }
}