@layer base {
  body {
    font-family: var(--nxf-text);
    font-size: var(--nxf-step-0);
    background-color: var(--nxf-surface);
    color: var(--nxf-ink);
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--nxf-display);
    line-height: 1.02;
    text-wrap: balance;
    letter-spacing: -0.01em;
    text-transform: uppercase;
  }

  p {
    text-wrap: pretty;
    max-inline-size: var(--nxf-measure);
  }

  a {
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }
}

@layer composition {
  .nxf-shell {
    inline-size: min(100% - 2rem, var(--nxf-shell));
    margin-inline: auto;
  }

  .nxf-stack {
    display: flex;
    flex-direction: column;
  }

  .nxf-stack[data-nxf-stack="s"] {
    gap: var(--nxf-gap-s);
  }

  .nxf-stack[data-nxf-stack="m"] {
    gap: var(--nxf-gap-m);
  }

  .nxf-stack[data-nxf-stack="l"] {
    gap: var(--nxf-gap-l);
  }

  .nxf-flow > * + * {
    margin-block-start: var(--nxf-gap-s);
  }

  .nxf-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nxf-gap-s);
    align-items: center;
  }

  .nxf-section {
    padding-block: clamp(var(--nxf-gap-xl), 6vw, var(--nxf-gap-2xl));
  }

  .nxf-grid {
    display: grid;
    gap: var(--nxf-gap-m);
  }

  .nxf-switcher {
    display: grid;
    gap: var(--nxf-gap-m);
  }

  @supports (container-type: inline-size) {
    .nxf-pane {
      container-type: inline-size;
    }
  }
}