@layer modules {
  .page {
    background: var(--color-canvas);
    color: var(--color-ink);
    min-height: 100dvh;
  }

  .page--dark {
    background: var(--color-slate-950);
    color: var(--color-white);
  }

  .page--surface {
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .container {
    margin-inline: auto;
    max-inline-size: var(--container-max);
    padding-inline: var(--container-padding);
  }

  .page-main {
    padding-block: clamp(1.5rem, 3vw, 3rem);
  }

  .page-main--mobile-nav {
    padding-bottom: clamp(4.5rem, 8vw, 6rem);
  }

  .section {
    display: flex;
    flex-direction: column;
    gap: var(--block-space);
  }

  .section__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--block-space);
    justify-content: space-between;
  }

  .section__eyebrow {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    letter-spacing: 0.25em;
    text-transform: uppercase;
  }

  .page-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
  }

  .page-card__body {
    padding: var(--block-space-double);
  }

  .page-card__body--compact {
    padding: var(--block-space);
  }
}

@layer utilities {
  .container {
    max-width: var(--container-max);
  }
}