@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--color-accent-hover);
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--color-accent); }

strong { font-weight: 600; }

::selection {
  background: var(--color-accent-light);
  color: var(--color-heading);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  background: var(--color-heading);
  color: var(--color-inverse);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-md);
  z-index: 9999;
  font-size: var(--text-sm);
}
.skip-link:focus {
  top: var(--sp-4);
}