html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: var(--font-family-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


main{
  background-color: #f7f4eb;
}

/* =========================================
   PAGE PLACEHOLDER
========================================= */

.page-placeholder {
  padding: var(--space-xxl) var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
}

.page-placeholder__inner {
  max-width: 640px;
}

.page-placeholder__title {
  font-size: var(--font-size-xxl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-md);
}

.page-placeholder__text {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
}

.page-placeholder__button {
  display: inline-block;
  padding: 14px 28px;
  background: var(--color-button-primary-bg);
  color: var(--color-button-primary-text);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: var(--transition-base);
}

.page-placeholder__button:hover {
  background: var(--color-accent-hover);
}