@layer components {

  /* Global reset + box‑sizing, etc. */
  * { box-sizing: border‑box; margin: 0; padding: 0; }

  body {
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--white);
    font-family: var(--default-font)
  }

  *, *::before, *::after{
    font-family: inherit;
  }

  /* Containers full‑width on mobile */
  .main-container {
    padding: 1rem;
  }

  /* Breakpoint at 640px (sm/md) */
  @media (min-width: 640px) {
    .main-container {
      max-width: 640px;
      margin: 0 auto;
    }
  }

  /* Larger layout at 1024px */
  @media (min-width: 1024px) {
    .main-container {
      max-width: 960px;
    }
  }  
}