@layer base {
  html {
    scroll-padding-block-start: var(--header-height);
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-primary);
    background-color: var(--color-bg-base);
    letter-spacing: var(--letter-spacing-base);
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-heading);
    color: var(--color-text-primary);
    text-wrap: balance;
  }

  p {
    line-height: var(--line-height-base);
  }

  a {
    color: inherit;
    transition: color var(--duration-fast) var(--easing-standard);
  }

  a:hover {
    color: var(--color-brand);
  }

  ::selection {
    background-color: var(--color-brand-tint);
    color: var(--color-text-primary);
  }

  /* 画像プレースホルダー共通（差し替え予定のイラスト・写真） */
  .placeholder-note {
    font-family: var(--font-family-base);
    font-size: var(--font-size-xs);
    color: var(--color-text-on-placeholder);
    letter-spacing: var(--letter-spacing-wide);
  }
}