/* Webvolley design-system tokens and global foundations. */
:root {
  --wv-ink: #1f2723;
  --wv-paper: #f4f1ea;
  --wv-paper-light: #fbfaf6;
  --wv-green: #b5d1ad;
  --wv-terracotta: #a9472c;
  --wv-chalk: #596568;
  --wv-chalk-light: #d7dfdc;
  --wv-chalk-muted: rgba(247, 248, 244, 0.76);
  --wv-chalk-line: rgba(247, 248, 244, 0.2);
  --wv-line: rgba(31, 39, 35, 0.16);
  --wv-muted: rgba(31, 39, 35, 0.75);
  --wv-focus: #0b57d0;

  --wv-font-display: Georgia, "Times New Roman", serif;
  --wv-font-ui: "Trebuchet MS", Arial, Helvetica, sans-serif;

  --wv-container: 1280px;
  --wv-gutter-desktop: 48px;
  --wv-gutter-tablet: 32px;
  --wv-gutter-mobile: 18px;
  --wv-section: clamp(4.5rem, 8vw, 7rem);

  --wv-radius-small: 10px;
  --wv-radius-control: 13px;
  --wv-radius-card: 18px;
  --wv-radius-large: 28px;
  --wv-radius-round: 999px;

  --wv-motion-fast: 180ms;
  --wv-motion-control: 220ms;
  --wv-motion-reveal: 700ms;
  --wv-motion-visual: 900ms;
  --wv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Compatibility mapping for inner pages that are migrated after CH-04. */
  --theme-color-primary: var(--wv-green);
  --theme-color-secondary: var(--wv-terracotta);
  --theme-color-accent: var(--wv-ink);
  --theme-color-neutral: var(--wv-paper-light);
  --theme-color-surface: var(--wv-paper);
  --theme-text-on-primary: var(--wv-ink);
  --theme-text-on-secondary: var(--wv-paper-light);
  --theme-text-on-accent: var(--wv-paper-light);
  --theme-text-on-surface: var(--wv-ink);
  --theme-color-heading-text: var(--wv-ink);
  --theme-focus-ring: var(--wv-focus);
  --theme-focus-halo: var(--wv-paper-light);
  --theme-shadow-sm: none;
  --theme-shadow-md: none;
  --theme-shadow-lg: none;
  --override-font-primary: var(--wv-font-display);
  --override-font-secondary: var(--wv-font-ui);
}

html {
  background: var(--wv-paper);
  color: var(--wv-ink);
  font-family: var(--wv-font-ui);
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.66), transparent 34rem),
    var(--wv-paper);
  color: var(--wv-ink);
  font-family: var(--wv-font-ui);
  font-size: 1rem;
  line-height: 1.65;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--wv-ink);
  font-family: var(--wv-font-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

img,
video,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: 3px solid var(--wv-focus) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 3px var(--wv-paper-light) !important;
}

::selection {
  background: var(--wv-green);
  color: var(--wv-ink);
}

.wv-shell {
  width: min(calc(100% - (2 * var(--wv-gutter-desktop))), var(--wv-container));
  margin-inline: auto;
}

.wv-visually-hidden,
.wv-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1180px) {
  .wv-shell {
    width: min(calc(100% - (2 * var(--wv-gutter-tablet))), var(--wv-container));
  }
}

@media (max-width: 820px) {
  html {
    scroll-padding-bottom: 5.5rem;
  }

  :where(input, textarea, select, button, a):focus {
    scroll-margin-block: 5.5rem;
  }

  .wv-shell {
    width: calc(100% - (2 * var(--wv-gutter-mobile)));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}